[vue-router] Named Route ‘Layout‘ has a default child route. When navigating to this named route (:t

最新推荐文章于 2025-01-08 19:30:00 发布

原创最新推荐文章于 2025-01-08 19:30:00 发布 · 3.7k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue-router #vue #路由

前端开发专栏收录该内容

70 篇文章

订阅专栏

在Vue项目中使用vue-router时遇到一个警告，提示父级路由'Layout'不应有name属性，因为存在默认子路由。解决方法是删除父级路由的name属性，以避免在导航到该命名路由时默认子路由不被渲染。更新后的代码显示，将'Layout'路由的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.

项目中的代码是这样的:

routes: [
        {
            path: '/',
            name: 'Layout',
            component: Layout,
            meta: {
                title: "首页",
                requireAuth: true
            },
            children: [
                User
            ]
        },
……
]

警告的原因,是在vue-router中,当有子路由的时候,父级路由需要一个默认的路由,所以这个时候不能给父级路由设置name属性,所以我们把父级路由中的name属性Layout去掉就不会再有警告了.

routes: [
        {
            path: '/',
            // name: 'Layout', //把name属性去掉后就不会再有警告了
            component: Layout,
            meta: {
                title: "首页",
                requireAuth: true
            },
            children: [
                User
            ]
        },
……
]