在vue3中使用router-link-active遇到的坑

在使用 router-link-active 设置链接激活时CSS类名时，发现在例如 /member/order 和 /member/order/:id 这两个都包含 /member/order的路由路径，其中后者无法和前者一样设置类名，也就是 router-link-active 加不上

在vue2中可以实现，因为 router-link-active 本就不是精确匹配，只要路由路径包含router-link组件的to属性值，就可以在链接激活时设置CSS类名

但是在vue3中，无法实现

---

在查看官方回答后，该属性有新的改变 

 

 也就是说，如果在Router v4中，如果想使用 router-link-active ，路由路径包含需要包含router-link组件的to属性值 且 需要路由嵌套关系。

原路由：

{
        path: '/member',
        component: MemberLayout,
        children: [
          { path: '/member', component: MemberHome },
          { path: '/member/order', component: MemberOrder },
          { path: '/member/order/:id', component: MemberDetail }
        ]
      }

更改后：

{
        path: '/member',
        component: MemberLayout,
        children: [
          { path: '/member', component: MemberHome },
          // { path: '/member/order', component: MemberOrder },
          // { path: '/member/order/:id', component: MemberDetail }
          {
            path: '/member/order',
            // 创建一个RouterView容器形成嵌套关系
            component: { render: () => h(<RouterView />) },
            children: [
              { path: '', component: MemberOrder },
              { path: ':id', component: MemberDetail }
            ]
          }
        ]
      }