从一个页面跳转到目标页面之后，对应的顶部路由高亮

需求：页面跳转到目标页面之后，对应的顶部路由高亮 

上面的更多 跳转到 学情分析下面的学生分析

一级路由循环渲染  currentIndex高亮   添加点击事件

                          :class="{ activeParent: currentIndex == index }"
              v-for="(item, index) in routeMenus"
              :key="index"
              @click="selectParentRoute(item, index)"
            >
              {{ filterTitle(item.meta.title) }}
             
           
         

 

二级路由  currentChildIndex高亮  添加点击事件

       

          :class="{ activeChild: currentChildIndex == index }"

          v-for="(item, index) in subMenus"

          :key="index"

          @click="selectChildRoute(item, index)"

        >

          {{ filterTitle(item.meta.title) }}

       

     

在data中定义变量：

         // 当前激活一级菜单的 index

      currentIndex: localStorage.getItem("parentPathIndex") || 0,

      // 二级菜单index

      currentChildIndex: localStorage.getItem("childPathIndex") || 0,

 

 在跳转页面（也就是学情概览页面）的methods里面新增一个方法

 findMore(name, path) {

      let parentIndex = this.routeMenus.findIndex(v => v.meta.title == name);

      let childIndex = this.routeMenus[parentIndex].children.findIndex(v => v.path == path);

      localStorage.setItem("parentPathIndex", parentIndex);

      localStorage.setItem("childPathIndex", childIndex);

      this.$router.push(path);

    },

在学情概览页面结构里面 点击更多的地方使用这个方法并传参： 

routeMenus

 

目标页面：