VUE之Router命令行警告：Named Route ‘Home‘ has a default child route 的解决办法

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

转载最新推荐文章于 2025-01-08 19:30:00 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/zhixi/p/9640785.html

文章标签：

#vue.js #javascript #前端

当Vue Router中的路由存在子路由时，如果父路由定义了name属性，会导致默认子路由无法正常渲染。解决这个问题的方法是移除父路由的name属性，改用子路由的name属性进行命名链接。例如，将`name: 'Home'`移除，并确保子路由如`HomeCarousel`正确配置。这样做可以确保导航到父路由时，其默认的子路由能够正确显示。

Named Route ‘Home’ has a default child route. When navigating to this named route (:to=“{name: ‘Home’”), 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.

报错代码：

{
      path:'/page/home/Home',
      name:'Home',
      component:Home,
      children:[
        {
          path: '/',
          name: 'HomeCarousel',
          component: HomeCarousel,
        },
      ]
    }

总结警告原因：当某个路由有子级路由时，父级路由需要一个默认的路由，所以父级路由不能定义name属性，解决办法是去掉name:'Home’就可以了

正确代码：

{
      path:'/page/home/Home',
      component:Home,
      children:[
        {
          path: '/',
          name: 'HomeCarousel',
          component: HomeCarousel,
        },
      ]
    }