Vue routing settings: active style disappears when parent route switches child route

Recently, I encountered that the selection effect of the menu disappeared after clicking on the page to enter the sub-page.

First our menu is like this

The selected style is like this

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

The routing is like this

{
    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: '優惠券詳情',
        }
      },
    ]
},

The coupon details here are the page that jumps to the coupon page.

Solution

We need to set a selected path for the page that is not displayed in the menu bar. Pay attention to the parent path attribute path. The parent path here is /Productmanagement on the second line and coupon on the twelfth line. That is /Productmanagement/coupon.

activeMenumetaIt is a custom attribute you define in Vue Router's routing metainformation ( ). In your code, you use it to identify the title of a menu item in order to set the selection effect in the sidebar menu.

Specifically, you use the object in the route configuration metato define the metainformation of the route, for example:

activeMenu: '/Productmanagement/coupon'

 If /coupon or coupon is set, it will not take effect.

The correct configuration is as follows:

{
    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' // 指定完全匹配的路径，要加上父路徑
        }
      },
      ]
},

Here /Productmanagement/coupon is equivalent to coupon. Both writing methods can be used. The path of the coupon details can also be written as path: 'coupon/WorkFormEdit/:couponid/:memberid'.

Let’s take a look at how to jump from coupons to coupon details and pass parameters

<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>