vue路由设置：父路切换子路由 active样式消失

最近遇到了点击页面进入子页面后菜单的选中效果消失

首先我们的菜单是这样的

选中样式是这样的

/* 菜單被選中的背景色 */
.el-menu .el-menu-item.is-active {
  background-color: #FFEFD7 !important;
  color: #0E0F0F !important;
  border-right: 3px solid var(--primary-dark, #FBA429);
}

路由是这样的

{
    path: '/Productmanagement',
    component: Layout,
    redirect: '/Productmanagement/coupon',
    name: 'Productmanagement',
    meta: {
      title: '產品管理', icon: 'productManagement',
      roles:['Authenticated','merchant','ManagementAdmin'] // 角色信息
    },
    children: [
      {
        path: 'coupon',
        name: 'Coupon',
        component: () => import('@/views/coupon/Coupon_classification'),
        meta: {
          title: '優惠券', icon: 'DMIconMaster', 
          roles: ['Authenticated','ManagementAdmin'],
        },
      },
      {
        path: '/coupon/WorkFormEdit/:couponid/:memberid',
        name: '優惠券詳情',
        component: () => import('@/views/coupon/edit/index.vue'),
        hidden: true,
        meta: {
          title: '優惠券詳情',
        }
      },
    ]
},

这里的优惠券详情是在优惠券页面跳转进入的页面

解决方法

我们需要给不显示在菜单栏的页面设置一个选中的路径，注意要带上父路径属性path，这里的父路径是第二行的/Productmanagement和第十二行的coupon。即/Productmanagement/coupon。

activeMenu 是你在 Vue Router 的路由元信息（meta）中定义的一个自定义属性。在你的代码中，你将它用于标识一个菜单项的标题，以便在侧边栏菜单中设置选中效果。

具体来说，你在路由配置中使用 meta 对象来定义路由的元信息，例如：

activeMenu: '/Productmanagement/coupon'

 如果设置/coupon或者coupon都是不生效的。

正确的配置如下：

{
    path: '/Productmanagement',
    component: Layout,
    redirect: '/Productmanagement/coupon',
    name: 'Productmanagement',
    meta: {
      title: '產品管理', icon: 'productManagement',
      roles:['Authenticated','merchant','ManagementAdmin'] // 角色信息
    },
    children: [
      {
        path: 'coupon',//  这里/Productmanagement/coupon等同於coupon,两种写法都可以
        name: 'Coupon',
        component: () => import('@/views/coupon/Coupon_classification'),
        meta: {
          title: '優惠券', icon: 'DMIconMaster', 
          roles: ['Authenticated', 'ManagementAdmin'],
        },
      },
      {
        path: '/Productmanagement/coupon/WorkFormEdit/:couponid/:memberid',
        component: () => import('@/views/coupon/edit/index.vue'),
        name: '優惠券詳情',
        hidden: true,
        meta: {
          title: '優惠券詳情',
          activeMenu: '/Productmanagement/coupon' // 指定完全匹配的路径，要加上父路徑
        }
      },
      ]
},

这里/Productmanagement/coupon等同於coupon,两种写法都可以，优惠券详情的path也可以写成path: 'coupon/WorkFormEdit/:couponid/:memberid'。

我们再看一下如何从优惠券跳转到优惠券详情并传参

<router-link :to="{
    name: '優惠券詳情',
    params: { couponid: scope.row.id, memberid: scope.row.membership_id.id,},
    }">
    标题
</router-link>


也可以这样写
<router-link :to="'/Productmanagement/coupon/WorkFormEdit/' +scope.row.id +'/'+scope.row.membership_id.id ">
    {
   
   { scope.row.title }}
</router-link>