Vue-router下params模式下匹配空的嵌套路由问题

晨灰ash2

已于 2023-03-09 11:03:59 修改

阅读量284

点赞数

CC 4.0 BY-SA版权

分类专栏： # VueRouter 文章标签：前端 vue

于 2023-03-09 10:43:51 首次发布

本文链接：https://blog.youkuaiyun.com/dbeidouxingf/article/details/129418218

VueRouter 专栏收录该内容

1 篇文章

订阅专栏

文章讨论了在Vue3的Vue-router中，父路由的name属性对子路由显示的影响，特别是在params模式下的路由匹配。当父路由具有name且子路由设置为空路径时，直接使用name进行路由匹配会失败。解决方法是在父组件中使用模板路径进行完整路径的匹配。这表明在某些情况下，整个路径的更新才能正确触发子路由的显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue-router.嵌套路由命名
Vue-router对父路由是否有name对子路由是否显示的影响。
Vue3嵌套子路由params模式匹配失败，现象：
1.一般params路由设计，path+name。name用于param中指定路径。

    path: '/arist/:id',
    name:'artist',
   component: Artist,
   children: [
     {
       path: '',
       name: 'defaulthotwork',
       component: Hotwork
     }
    ...
    ],

2.一般params路由参数和跳转，必须下使用name进行路由

       <router-link :to="{
         // path:'/arist',
          name:'arist',
          params:{
            id:songer.id
          }
          }">
        </router-link>

3.但是当路由中设计有name时，若要匹配path:''的子路由失败。

   children: [
     {
       path: '', //失败
       name: 'defaulthotwork',
       component: Hotwork
     }
    ...
],

若要能匹配到空路径的组件，只能在父组件中使用模板路径进行匹配

  <router-link :to="`/arist/${songer.id}`"> </router-link>

猜测是因为使用模板路径的话，算是整个路径更新，整段进行匹配