vue 解决浏览器后退路由变化，父路由状态不变问题

中间的是子路由 跳转到子路由的时候步骤条会 +1，
但是浏览器点击返回按钮的话页面是返回去了 但是步骤条没有 -1,
通过使用把步骤条存储在 vuex + 路由守卫解决。

router.js

引入 vuex
import store from '../vuex/store'
Vue.use(store)

// 关键部分路由
{
  path: '/Five/details/Roommates', 
  name: 'DetailsRoommates',
  component: DetailsRoommates,
  children: [
    {
      path: '/Five/details/Roommates/One',
      name: 'DetailsRoommatesOne',
      component: DetailsRoommatesOne,
      meta: {
        keepAlive: true
      }
    },
    {
      path: '/Five/details/Roommates/Two',
      name: 'DetailsMasterFilesTwo',
      component: DetailsMasterFilesTwo,
      meta: {
        keepAlive: true
      },
      // 使用 独享守卫  需要写好几遍所有还是用了全局守卫
      // beforeEnter: (to, from, next) => {
      //   store.commit('addActive', 2)
      //   console.log(to, "独享守卫", from, next);
      //   next()
      // }
    },
    {
      path: '/Five/details/Roommates/Three',
      name: 'DetailsRoommatesThree',
      component: DetailsRoommatesThree,
      meta: {
        keepAlive: true
      }
    },
    {
      path: '/Five/details/Roommates/Four',
      name: 'DetailsMasterFilesFive',
      component: DetailsMasterFilesFive,
      meta: {
        keepAlive: true
      }
    },
    {
      path: '/Five/details/Roommates/Five',
      name: 'DetailsMasterFilesSix',
      component: DetailsMasterFilesSix,
      meta: {
        keepAlive: true
      }
    }
  ]
},

路由守卫

router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title
  }
  console.log(to);

  switch (to.fullPath) {
    case "/Five/details/Roommates/One":
      store.commit('addActive', 1)
      break;
    case "/Five/details/Roommates/Two":
      store.commit('addActive', 2)
      break;
    case "/Five/details/Roommates/Three":
      store.commit('addActive', 3)
      break;
    case "/Five/details/Roommates/Four":
      store.commit('addActive', 4)
      break;
    case "/Five/details/Roommates/Five":
      store.commit('addActive', 5)
      break;
  }
  next()
})

主路由文件关键部分代码

  computed: {
    active() {
      console.log("计算属性");
      return this.$store.state.active;
    }
  },
  methods: {
    ...mapMutations({
      update: "addActive" 
    }),
    next() {
      this.update(this.$store.state.active + 1);
      if (this.active == 1) {
        this.$router.push({ path: "One" });
      }
      if (this.active == 2) {
        this.$router.push({ path: "Two" });
      }
      if (this.active == 3) {
        this.$router.push({ path: "Three" });
      }
      if (this.active == 4) {
        this.$router.push({ path: "Four" });
      }
      if (this.active == 5) {
        this.$router.push({ path: "Five" });
      }
      if (this.active > 5) {
        this.active = 5;
        this.$router.push({ path: "/homes/index" });
      }
      console.log(this.active);
    },
    Previous() {
      this.$router.go(-1);
      // console.log("路由倒退");
    },
  }

这样写的话 点击下一步 vuex 就修改两次 不知道是 让他修改两次比较节能 还是 在 switch case 里判断一下比较节能