目标:
点击左侧菜单,对应的菜单就激活,右侧就显示对应的路由页面
路由配置
// 个人中心布局页
{
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 时