5.vue-element-admin-site-跳转子导航，展开父类导航效果

1.效果：

2.html:

<template>
  <el-menu :default-openeds="openeds">
    <div v-for="(route,index) in routes" :key="index + route.path">
      <sidebar-item :item="route" :base-path="route.path" />
    </div>
  </el-menu>
</template>

3.script：

<script>
export default {
  name: "",
  components: {},
  computed: {},
  data() {
    return {
      openeds: []
    };
  },
  watch: {
    //监听路由的路径，根据相应的详情页展开它所属的父类导航
    "$route.path": {
      deep: true,
      immediate: true,
      handler: function(val, oldVal) {
        if (val == "/merchant/details") {
          this.openeds.push("/merchant");
        } 
      }
    }
  },

  methods: {}
};
</script>

4.router：

export const constantRoutes = [
  {
    path: '/merchant',
    component: Layout,
    redirect: false,
    meta: {
      title: '一级导航',
      icon: 'dashboard'
    },
    children: [{
        path: 'list',
        name: '/list',
        component: () => import('@/views/merchant/list.vue'),
        meta: {
          title: '二级导航1',
          icon: 'dashboard'
        }
      },
      {
        path: 'details',
        name: 'merchant/details',
        hidden: true,
        component: () => import('@/views/merchant/details.vue'),
        meta: {
          title: '二级导航1详情',
          icon: 'dashboard'
        }
      },
    ]
  },
]