vue+element 進入不同路由頁面（二級頁面），讓相應的左側菜單

路由配置
{
 path: '/finance',
 name: 'Finance',
 meta: {
  title: '財務'
 },
 component: () =>
  import('@/components/Finance'),
 redirect: '/finance/code/code',
 children: [{
  path: '/finance/code',
  name: 'financeindex',
  meta: {
   title: '稅收配置'
  },
  redirect: '/finance/code/code',
  component: () =>
   import('@/components/finance/financeindex'),
  children: [{
    path: '/finance/code/code',
    name: 'FinanceCode',
    hidden: false,
    active:'/finance/code',    //這里是在左側菜單顯示並且需要選中的
    meta: {
     title: '稅收編碼（金稅）'
    },
    component: () =>
     import('@/components/finance/code/Code'),
   },
   {
    path: '/finance/code/codeimportrecord',     // 這個路由進入的界面是 稅收編碼（金稅）的二級頁面， 當進入這個頁面的時候，需要菜單中的稅收編碼（金稅）顯示選中

    name: 'FinanceCodeImportRecord',
    hidden: true,
    meta: {
    title: '稅收編碼導入記錄'
    　　},
    component: () =>
    import('@/components/finance/code/CodeImportRecord'),
    },
   {
    path: '/finance/classcode/classcode',
    name: 'FinanceClassCode',
    hidden: false,
    active:'/finance/classcode',   //為了省事，只給需要在左側顯示的路由添加active屬性
    meta: {
     title: '分類稅收編碼確認'
    },
    component: () =>
     import('@/components/finance/classCode/ClassCode'),
   },
  ]
 }, ]


element

<template>
  <div class="leftnav">
    <!--<div class="" v-for="nav in navs">
            <div class="LiHeader">
                {{nav.name}}
            </div>
            <li v-for="item in nav.san">
                {{item.name}}
            </li>
        </div>-->
    <el-menu
      style="text-align: left;"
      :default-active=this.show  //  這是的值是指與 el-menu-item中：index的值對應的那一天顯示選中（正常情況就是一個頁面一個路由，進入那個路由，對應的導航菜單需要選中）
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#282b33"
      text-color="#bcbcbc"
      active-text-color="#ffffff">
      <div class="" v-for="(nav,index) in navs" :key="index" style="width: 200px;">
        <div class="" style="color: #ffffff;height: 40px;line-height: 40px;padding-left: 20px;font-size: 16px;">
          {{nav.meta.title}}
        </div>
        <el-menu-item @click="clickroute(item.path)" v-for="(item,index) in nav.children" v-if="!item.hidden" :key="index" :index="item.active"（這里原來是item.path） style="height: 40px;line-height: 40px;">{{item.meta.title}}</el-menu-item>
      </div>

    </el-menu>
  </div>
</template>
<script>

js

 data() {
      return {
        navs:[],
        show:null    //初始化上面:default-active綁定的值
      }
    },
    created() {  //// 頁面載入的時候，拿到url，用/拆開，然后拼起來前兩個路徑，並且賦值，    這個時候show對應的就是路由表中的 avtive，
      let route=this.$route.path.split('/')
      let vueRouter=this.$router.options.routes.filter(router=>{return router.path=='/'})[0].children
      let filterVuerouter=vueRouter.filter(router=>{return '/'+route[1] == router.path })
      this.navs=filterVuerouter[0].children
      console.log(this.navs)

      let router ='/'+route[1]+'/'+route[2]
  console.log(router)
      this.show=router
//     console.log(this.show)
    },
    mounted() {

    },