vue-router中,父级路由不能有name属性

vue项目中,使用了vue-router,我的场景是在一个路由中嵌套了子级路由,然后我在运行项目的时候,给出了警告:

[vue-router] Named Route 'Layout' has a default child route. When navigating to this named route (:to="{name: 'Layout'"), the default child route will not be rendered. Remove the name from this route and use the name of the default child route for named links instead.

源码为:

let router = new Router({
    linkActiveClass: "active",
    mode: "history",
    routes: [
        {
            path: '/',
            name: 'Layout',
            component: Layout,
            meta: {
                title: "首页",
                requireAuth: true // 标识该路由是否需要登录
            },
            children: [
                /**
                 * 用户中心:用户添加、用户列表、修改密码
                 */
                User
            ]
        },
……
]

原来是在vue-router中,当路由有嵌套的子级路由的时候,父级路由需要一个默认的路由,不能再给其设置name属性了,我们只需要将父级路由的name属性去掉就可以了;

let router = new Router({
    linkActiveClass: "active",
    mode: "history",
    routes: [
        {
            path: '/',
            // name: 'Layout',  //把父级路由去掉就不会再有警告了
            component: Layout,
            meta: {
                title: "首页",
                requireAuth: true // 标识该路由是否需要登录
            },
            children: [
                /**
                 * 用户中心:用户添加、用户列表、修改密码
                 */
                User
            ]
        },
……
]