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

原创已于 2023-03-09 11:03:59 修改 · 323 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue

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

VueRouter 专栏收录该内容

1 篇文章

订阅专栏

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

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>

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