vue导航栏，页面跳转时导航栏不随之改变

项目场景：

我们在进行前端页面开发时经常需要通过点击首页的卡片而跳转至其他页面。

---

问题描述

在跳转至其他页面时导航栏未随着发生改变。

---

原因分析：

提示：这里填写问题的分析：

发生这种情况一般来说是应为 :default-active所绑定的值未发生变化或者为重新渲染。

<el-menu

        :default-active="changeActiveIndex">

---

解决方案：

提示：这里填写该问题的具体解决方案：

解决方法：使用vuex去保存当前索引。代码如下：

index.js

import Vue from 'vue'

import Vuex from 'vuex'

import tab from './tab'

Vue.use(Vuex)

// 创建vuex实例

export default new Vuex.Store({

    modules:{

        tab

    }

})

tab.js

export default {

    state:{

 

        activeIndex: localStorage.getItem('activeIndex')||'1'

    },

    mutations:{

        ChangeactiveIndex(state,index){

         state.activeIndex = index;

        localStorage.setItem('activeIndex', index); // 在mutation中更新localStorage的值

        }

    }

}

此处使用ChangeactiveIndex来更改state中的activeIndex 而   这句话的意思是（ activeIndex: localStorage.getItem('activeIndex')||'1'）  activeIndex的默认值为localStorage中的activeIndex，如果没有这个值的话就让默认值为首页所对应的索引，我这里首页用的索引是“1”，

接下来就是使用它的时候了

在点击顶部导航栏进行页面跳转时，我们需要将state中的activeIndex更改成当前Index，因此我们需要调用ChangeactiveIndex。具体使用方法如下：

顶部导航栏代码;

   <el-menu

        :default-active="changeActiveIndex"

        class="el-menu-demo"

        mode="horizontal"

      >

        <el-menu-item

          :index="item.index"

          v-for="item in menuData"

          :key="item.name"

          class="item"

          @click="ChangePage(item)"

        >

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

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

        </el-menu-item>

      </el-menu>

数据：

   menuData: [

        {

          path: "/index",

          name: "index",

          label: "首页",

          title: "首页",

          index: "1",

          //   icon: "el-icon-s-home",

        },

        {

          path: "/detail",

          name: "detail",

          label: "菜品详情",

          title: "菜品详情",

          //   icon: "el-icon-s-shop",

          index: "2",

        },

        {

          path: "/paihang",

          name: "paihang",

          label: "排行",

          index: "4",

          icon: "el-icon-s-custom",

        },

        {

          path: "/info",

          name: "info",

          label: "个人中心",

          index: "3",

          //   icon: "el-icon-s-check",

        },

      ],

:default-activce绑定的计算属性

  computed: {

    changeActiveIndex() {

//获取更改后的state中的activeIndex。

      return this.$store.state.tab.activeIndex;

    },

  },

页面跳转方法：

   ChangePage(item) {

      //当跳转路由不一致时才跳转

      localStorage.setItem("activeIndex", item.index);

        //在此处更改state中的activeIndex的值

      this.$store.commit("ChangeactiveIndex", item.index);

      if (

        this.$route.path !== item.path &&

        !(this.$route.path === "/index" && item.path === "/")

      ) {

        this.$router.push(item.path);

      }

    },

此处顶部导航栏工作就此结束，接下来到了点击首页里的卡片跳转至商品详情页，这里就只需在点击事件函数中更改state中的active值即可   this.$store.commit("ChangeactiveIndex"，“需要跳转的网页index”);

具体代码如下：

 // 跳转至菜品详情页

    showdietarydetail(item) {

      this.$store.commit("ChangeactiveIndex", "2");

      if (

        this.$route.path !== item.path &&

        !(this.$route.path === "/index" && item.path === "/")

      ) {

        //路由跳转

        this.$router.push("/detail");

      }

    },

最后一个问题，我们在点击浏览器自带的返回按钮时，导航栏也不会发生改变，此时我们只需在顶部导航栏组件中添加以下函数即可：

  mounted() {

    // 添加对 popstate 事件的监听

    window.addEventListener("popstate", this.handlePopstate);

  },

methods:{

 handlePopstate() {

      // 获取当前路由路径

      const currentPath = this.$route.path;

      // 根据当前路由路径找到对应的菜单项

      const currentItem = this.menuData.find(

        (item) => item.path === currentPath

      );

      if (currentItem) {

        // 更新激活选项为当前路径对应的菜单项的 index

        this.$store.commit("ChangeactiveIndex", currentItem.index);

        // this.activeIndex = currentItem.index;

      } else {

        // 如果未找到对应的菜单项，则将激活选项设置为默认值

        this.$store.commit("ChangeactiveIndex", "1");

      }

}