vue导航栏 不错的解决方案

 其实做一个vue导航栏简单，但是真正做好才是重要的。下面我就展示下我的导航栏解决方案

 

第一步：给vuex中加上nav数据【让nav变为全局数据】

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: { nav: "", },  //【核心代码 加上一个nav】
  mutations: {},
  actions: {},
  modules: {},
});

 第二步：给组件设置相互捆绑【主要解决了刷新之后nav会改变的问题】

第三步：因为我们在实际操作中，会遇到点击页面内容首页后，页面跳转了，但是nav还是没有变化的问题。我们就直接使用以下代码（bug场景如下）

这里我们在首页文件中加上一行这样的代码就可以了

 mounted () {
    this.$store.state.nav = 0;   //【核心代码】 意思就是页面跳转过来就自动给state中的全局nav传0
  },

如有不理解的可以留言，我会实时关注和回复。

如有发现错误请及时联系我指证，相互碰撞才是技术上升的核心动力