【vue3】路由菜单激活

最新推荐文章于 2024-06-20 22:53:16 发布

lisa带你捕蟑螂

最新推荐文章于 2024-06-20 22:53:16 发布

阅读量727

点赞数

分类专栏：【vue3项目】b2c电商-pc端 vue知识点文章标签： html 前端 vue.js

本文链接：https://blog.csdn.net/weixin_51290060/article/details/129878575

版权

本文探讨在Vue3中如何实现点击左侧菜单激活对应的路由，并展示相关配置。针对路由的精确匹配问题，文章指出在Vue2中使用`exact-active-class`可以实现，但在Vue3中此方法不再适用。作者提供了Vue2和Vue3的不同写法，并讨论了在Vue3中处理子路由激活父菜单的挑战。

摘要由CSDN通过智能技术生成

目标：

点击左侧菜单，对应的菜单就激活，右侧就显示对应的路由页面

路由配置

  // 个人中心布局页
  {
    path: '/member',
    component: MemberLayout,
    children: [
      { path: '/member', component: MemberHome }, // 个人中心页
      { path: '/member/order', component: MemberOrder }, // 个人中心-我的订单
      { path: '/member/order/:id', component: MemberOrderDetail }// 个人中心-我的订单-详情页
    ]
  }

router-link 默认情况下的路由是模糊匹配，