vue 在一个页面跳转到另外一个页面，选中的导航没有变解决方案

效果：即在配置页面跳到管理页后，没有选中管理，还是跳转前的选中状态

解决思路：
1.定位：路由和默认选中菜单的监听问题
2.方案：去菜单组件中，通过监听路由变化，改变选中值

具体代码实现：

<el-aside :class="navBarWidth">
      <el-menu
        @select="handleSelect"
        :default-active="defaultActive"
        class="el-menu-vertical-demo"
        background-color="#03152b"
        text-color="#fff"
        active-text-color="#fff"
        router
        :collapse="isCollapse"
      >
        <!-- :default-openeds="[1,2,3,4,5,6]" -->
        <!-- :default-openeds="[menuList[1].path,menuList[2].path,menuList[4].path,menuList[5].path,menuList[6].path]" -->
        <!-- el-menu属性-始终保持一个展开  unique-opened -->
        <div v-for="(item, index) in menuList" :key="item.path">
          <el-submenu :index="'' + index" v-if="item.children">
            <template slot="title">
              <img :src="item.icon" alt="" />
              <span slot="title">{{ item.title }}</span>
            </template>
            <div v-for="i in item.children" :key="i.path">
              <el-submenu :index="i.path" v-if="i.children">
                <template slot="title">
                  <img :src="i.icon" alt style="margin:0 3px" width="18px" />
                  <span slot="title">{{ i.title }}</span>
                </template>
                <el-menu-item
                  v-for="v in i.children"
                  :key="v.path"
                  :index="v.path"
                >
                  <img :src="v.icon" alt style="margin:0 3px" width="18px" />
                  <span slot="title">{{ v.title }}</span>
                </el-menu-item>
              </el-submenu>
              <el-menu-item :index="i.path" :key="i.path" v-else>
                <img :src="i.icon" alt style="margin:0 3px" width="18px" />
                <span slot="title">{{ i.title }}</span>
              </el-menu-item>
            </div>
          </el-submenu>
          <el-menu-item :index="item.path" v-else>
            <img
              v-if="item.moduleIcon"
              :src="item.moduleIcon"
              alt
              width="14px"
            />
            <span slot="title" style="margin:0 3px">{{ item.title }}</span>
          </el-menu-item>
        </div>
      </el-menu>
    </el-aside>
	
	computed: {
    defaultActive: function() {
      return this.$route.path; //监听路由，控制菜单选择
    }
  },
  mounted() {
    // console.log(this.menuList, this.$route);
  },
  methods: {
    handleSelect(index, indexPath) {
      this.defaultActive = index;
    }
  }

欢迎关注公众号：【抓住重点】，获取更多编程周边技能，与博主一起进步