vue项目菜单激活

Vue3.0动态激活左侧菜单实现

最新推荐文章于 2023-08-04 14:47:34 发布

原创最新推荐文章于 2023-08-04 14:47:34 发布 · 728 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了如何在Vue3.0中动态激活左侧菜单。通过设置精确匹配类名，利用`router-link-active`和`router-link-exact-active`实现菜单高亮。但需注意，由于Vue3.0的改变，`router-link-active`不再适用于非嵌套路由的模糊匹配。示例代码展示了在`app-member-aside.vue`和`router/index.js`中的配置方法，包括个人中心和个人订单路由的设置。

目的：动态激活左侧菜单

大致步骤：

添加个人中心路由地址，设置精准匹配类名
添加我的订单路由与组件

router-link-active   当你的路由路径包含 router-link组件的to属性值，当前组件会加上它
router-link-exact-active   当你的路由路径完全和你的router-link组件的to属性值一致，当前组件会加上它

注意：vue3.0 router-link-active 加不上，路由路径包含且需要又路由嵌套关系。

例如：/member /member/other 但是不是嵌套路由，不会加上这个类 router-link-active

src/components/app-member-aside.vue

      <h4>我的账户</h4>
      <div class="links">
+        <RouterLink to="/member" exact-active-class="active">个人中心</RouterLink>
        <a href="javascript:;">消息通知</a>
        <a href="javascript:;">个人信息</a>
        <a href="javascript:;">安全设置</a>
        <a href="javascript:;">地址管理</a>
        <a href="javascript:;">我的积分</a>
        <a href="javascript:;">我的足迹</a>
        <a href="javascript:;">邀请有礼</a>
        <a href="javascript:;">幸运抽奖</a>
      </div>
      <h4>交易管理</h4>
      <div class="links">
+        <RouterLink to="/member/order" exact-class="active">我的订单</RouterLink>
        <a href="javascript:;">优惠券</a>

src/router/index.js

const MemberOrder = () => import('@/views/member/order')

          {
            path: '/member/order/',
            // vue3.0 需要有嵌套关系才能模糊匹配    
            component: { render: () => h(<RouterView/>) },
            children: [
              { path: '', component: MemberOrder },
              { path: ':id', component: MemberOrderDetail }
            ]
          }