【vue3】路由菜单激活
发布时间
阅读量：
阅读量
目标：
点击左侧菜单，对应的菜单就激活，右侧就显示对应的路由页面
路由配置
// 个人中心布局页
{
path: '/member',
component: MemberLayout,
children: [
{ path: '/member', component: MemberHome }, // 个人中心页
{ path: '/member/order', component: MemberOrder }, // 个人中心-我的订单
{ path: '/member/order/:id', component: MemberOrderDetail }// 个人中心-我的订单-详情页
]
}
router-link 默认情况下的路由是模糊匹配，
- active-class 如果是to="/article"，例如当前路径是 /article/1 那么也会激活
- exact-active-class 这个 router-link 只有在当前路由被全包含匹配时才会被激活,当用户访问 /article/1 时
<!-- <a href="javascript:;">个人中心</a> -->
<RouterLink to="/member" exact-active-class="active">个人中心</RouterLink>
<!-- <a href="javascript:;">我的订单</a> -->
<RouterLink to="/member/order" exact-active-class="active">我的订单</RouterLink>
此时就能实现 点击那个菜单就激活哪个
但是 如果我的订单菜单里还有子路由页面
<div class="">我的订单
<router-link to="/member/order/1001">订单1</router-link>
<router-link to="/member/order/1002">订单2</router-link>
</div>
想要点击子路由 我的订单也会被激活，是不是把 我的订单改成模糊匹配就可以？
<!-- <a href="javascript:;">个人中心</a> -->
<RouterLink to="/member" exact-active-class="active">个人中心</RouterLink>
<!-- <a href="javascript:;">我的订单</a> -->
<RouterLink to="/member/order" active-class="active">我的订单</RouterLink>
发现还是没有用，
但是对于vue2肯定是管用的，vue3就不好用，vue3里对这个进行了修改
vue2写法
vue3写法
// 个人中心布局页
{
path: '/member',
component: MemberLayout,
children: [
{ path: '/member', component: MemberHome }, // 个人中心页
// { path: '/member/order', component: MemberOrder }, // 个人中心-我的订单
// { path: '/member/order/:id', component: MemberOrderDetail }// 个人中心-我的订单-详情页
{
// vue3.0 需要有嵌套关系才能模糊匹配
path: '/member/order', // 改造我的订单的路由
component: { render: () => h(<RouterView/>) }, // 创建RouterView标签
children: [
{ path: '', component: MemberOrder }, // 我的订单页 /member/order
{ path: ':id', component: MemberOrderDetail }// 我的订单详情页 /member/order/:id
]
}
]
}
<!-- <a href="javascript:;">个人中心</a> -->
<RouterLink to="/member" exact-active-class="active">个人中心</RouterLink>
<!-- <a href="javascript:;">我的订单</a> -->
<RouterLink to="/member/order" active-class="active">我的订单</RouterLink>
此时点击订单1 订单2，左侧我的订单 也会被激活
全部评论 (0)
还没有任何评论哟~