【导航菜单切换，避免切换不过来路由地址】

导航菜单

• default-active 当前激活菜单的 index
  主要解决导航菜单切换时的灵敏性，避免切换不过来路由地址

<el-container>
      <el-aside width="200px">
        <el-menu
            :default-active="defaultActive"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            router
        >
          <el-menu-item index="/security/missions/queries">
            <el-icon>
              <Setting/>
            </el-icon>
            <span>安防任务查询</span>
          </el-menu-item>
          <el-menu-item index="/security/missions/Issued">
            <el-icon>
              <Setting/>
            </el-icon>
            <span>安防任务下发</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main width="200px" style="border:1px solid #D1CDCD">
      //二级路由出口
        <router-view></router-view>
      </el-main>
    </el-container>

 data() {
    return {
      defaultActive: '/security/missions/queries',
    }
  },
computed: {
    path() {
      return this.$route.path
    },
  },
  watch: {
    path(_new) {
      console.log(_new)
      if (_new.endsWith('queries')) {
        this.defaultActive = '/security/missions/queries'
      } else if (_new.endsWith('Issued')) {
        this.defaultActive = '/security/missions/Issued'
      }
    },
  },
  mounted() {
    const path = this.$route.path
    if (path.endsWith('queries')) {
      this.defaultActive = '/security/missions/queries'
    } else if (path.endsWith('Issued')) {
      this.defaultActive = '/security/missions/Issued'
    }
  },

• router/index.js
• 路由地址

{
        path: '/security/missions',
        component: () => import('@/components/ParkSecurity/SecurityMissions'),
        children: [
            {
                path: 'queries',
                component: () => import('@/components/ParkSecurity/TaskQueries'),
            },
            {
                path: 'Issued',
                component: () => import('@/components/ParkSecurity/TaskIssued'),
            },
        ],
    },