解决前端开发路由跳转之页面跳转，左侧菜单栏高亮显示跟随

默认情况：

<template>

  <el-menu :default-active="currentIndex" @select="handleSelect">

    <div v-for="(item, index) in routeList" :key="index">

      <template v-if="item.hidden"></template>

      <template

        v-else-if="

          !item.children ||

          !item.children.length ||

          (item.meta && item.meta.hideChildren)

        "

      >

        <el-menu-item :index="item.path">

          <i :class="item.icon"></i>

          <span slot="title">{{ item.name }}</span>

        </el-menu-item>

      </template>

      <el-submenu :index="item.path" v-else>

        <template slot="title">

          <i :class="item.icon"></i>

          <span>{{ item.name }}</span>

        </template>

        <el-menu-item

          v-for="(child, ind) in item.children"

          :index="child.path"

          :key="ind"

          v-if="!child.meta.hidden"

        >

          <!-- <i :class="child.meta.icon"></i> -->

          <span slot="title">{{ child.name }}</span>

        </el-menu-item>

      </el-submenu>

    </div>

  </el-menu>

</template>

<script>

import { constantRoutes } from "@/router/index";

export default {

  name: "AsideContainer",

  data: () => {

    return {

      routeList: constantRoutes,

      currentIndex: constantRoutes[0].children[0].path,

    };

  },

  methods: {

    handleSelect(key, keyPath) {

      this.currentIndex = key;

      this.$router.push({ path: key });

    },

  },

  created() {

    // console.log(location);

    let index = location.pathname.indexOf("/detail");

    let indexC = location.pathname.indexOf("/compare");

    if (index !== -1) {

      this.$data.currentIndex = location.pathname.slice(0, index);

    } else if (indexC !== -1) {

      this.$data.currentIndex = location.pathname.slice(0, indexC);

    } else {

      this.$data.currentIndex = location.pathname;

    }

  },

};

</script>

:default-active="currentIndex"需要我们手动添加

:default-active="

      this.$route.path.indexOf('detail') == -1 ? this.$route.path : currentIndex

    "

全部代码

<template>

  <el-menu

    :default-active="

      this.$route.path.indexOf('detail') == -1 ? this.$route.path : currentIndex

    "

    @select="handleSelect"

  >

    <div v-for="(item, index) in routeList" :key="index">

      <template v-if="item.hidden"></template>

      <template

        v-else-if="

          !item.children ||

          !item.children.length ||

          (item.meta && item.meta.hideChildren)

        "

      >

        <el-menu-item :index="item.path">

          <i :class="item.icon"></i>

          <span slot="title">{{ item.name }}</span>

        </el-menu-item>

      </template>

      <el-submenu :index="item.path" v-else>

        <template slot="title">

          <i :class="item.icon"></i>

          <span>{{ item.name }}</span>

        </template>

        <el-menu-item

          v-for="(child, ind) in item.children"

          :index="child.path"

          :key="ind"

          v-if="!child.meta.hidden"

        >

          <!-- <i :class="child.meta.icon"></i> -->

          <span slot="title">{{ child.name }}</span>

        </el-menu-item>

      </el-submenu>

    </div>

  </el-menu>

</template>

<script>

import { constantRoutes } from "@/router/index";

export default {

  name: "AsideContainer",

  data: () => {

    return {

      routeList: constantRoutes,

      currentIndex: constantRoutes[0].children[0].path,

    };

  },

  methods: {

    handleSelect(key, keyPath) {

      this.currentIndex = key;

      this.$router.push({ path: key });

    },

    // activeIndex() {

    //   if (this.$route.matched.length === 2) {

    //     let parent = this.$route.matched[0];

    //     if (parent.meta && parent.meta.hideChildren) {

    //       this.$data.currentIndex = parent.path;

    //     } else {

    //       this.$data.currentIndex = this.$route.path;

    //     }

    //   }

    // },

  },

  created() {

    console.log(location);

    let index = location.pathname.indexOf("/detail");

    let indexC = location.pathname.indexOf("/compare");

    if (index !== -1) {

      this.$data.currentIndex = location.pathname.slice(0, index);

    } else if (indexC !== -1) {

      this.$data.currentIndex = location.pathname.slice(0, indexC);

    } else {

      this.$data.currentIndex = location.pathname;

    }

    // if (this.$route.matched.length > 2) {

    //   this.$data.currentIndex = this.$route.matched[1].path;

    // } else {

    //   // this.$data.currentIndex = this.$route.path;

    //   this.activeIndex();

    // }

  },

  watch: {

    $route(route) {

      // console.log("watch router: ", route);

      let index = route.path.indexOf("/detail");

      let indexC = route.path.indexOf("/compare");

      if (index !== -1) {

        this.$data.currentIndex = route.path.slice(0, index);

      } else if (indexC !== -1) {

        this.$data.currentIndex = route.path.slice(0, indexC);

      } else {

        this.$data.currentIndex = route.path;

      }

    },

  },

};

</script>

<style lang="less" scoped></style>