Vue Router 警告 ”[vue-router] Name

const routes = [{
    path: '/',
    redirect: '/home'
},{
    path: '/home',
    name: 'home',
    component: () => import('@/views/home/home.vue'),
    children:[{
        path: '',
        name: 'portal',
        component: () => import('@/views/portal/portal.vue'),
    },{
        path: '/personal',
        name: 'personal',
        component: () => import('@/views/personal/personal.vue'),
    }]
}]

如上代码,vue中使用路由嵌套调试时控制台给出以下警告

vue-router.png

翻译：命名路由“home”具有默认子路由。导航到此命名路由（ :to=" { name : 'home' } "）时，将不会呈现默认的子路由。从此路由中删除名称，并改用命名链接的默认子路由的名称。

解决方案

当某个路由有子级路由时，父级路由需要一个默认的路由，因此父级路由不能定义name属性，去掉父级路由的name属性即可
并且 子路由页面 跳转 父路由页面 不能采用 this.$router.push({ name: 'home'}); 或者 <router-link :to=" { name : 'home' } ">Go to Home</router-link>
而是采用this.$router.push({ path: '/home' }); 或者 <router-link to="/home">Go to Home</router-link> 方式