Tengo un proyecto hecho en Vue.js 3, usando vue-router con una configuración como esta:
const routes = [ { path: '/', name: "home", component: Home }, { path: '/philosophy', component: philosophy, children: [{ path: '/', component: card1 }, { path: '/card2', component: card2 }, { path: '/card3', component: card3 }, { path: '/card4', component: card4 }] } ] Cada tarjeta se carga a través de la directiva router-link , dentro de un elemento <div> donde hay una rowter-view .
La ruta de card1 es "/" para que la tarjeta1 se cargue justo cuando el usuario ingresa a la ruta "/filosofía". Esto funciona bien en Vue 2, pero no en Vue 3, donde el componente ya no se carga. ¿Hay alguna forma en Vue 3 de hacer que el componente card1 se cargue por defecto ?
Gracias de antemano por la ayuda.
Intente cambiar la ruta predeterminada de '/' a un literal de cadena vacío "" . Y luego, en el componente de filosofía, agregue una <router-view> en la plantilla para mostrar el componente predeterminado.
Rutas:
const routes = [ { path: '/philosphy', component: philosophy, children: [{ path: '', //default view component: card1 }, { path: '/card2', component: card2 }, { path: '/card3', component: card3 }, { path: '/card4', component: card4 }] } ]componente de filosofía:
<template> <router-view> </template> export default { name: "Philosophy" }