javascript - Vue怎样实现任意一个tab页面刷新后不回退到第一个tab标签？

Question

像上面的例子，初始时教练员页面，当我点击训练场页面，在浏览训练场页面时，刷新，但不想跳回到教练员那栏，要怎样实现？

同理，还有当我选择筛选条件南山区时，从列表中点击选择了一个训练场查看，但是返回时又想保留在已选择南山区的状态里（而不是一开始的全部区域里），这要怎样实现呢？

还有，之前上网查询了，发现有人提出这种方式：
1.使用vuex记录状态
2.将vuex store储存到localStorage
3.刷新页面之后读取localStorage初始化vuex store
想问下具体怎样实现？

Answer 1

你都已经说了上面3点了，去做不就好了。
提供一个思路：
当你从tab1点击切换到tab2的时候就在本地存一个标记，比如：

sessionStorage.setItem("flag", "1");

此时你在tab2浏览器刷新，js判断本地是否存在flag，如果存在那就tab2激活；否则就回到tab1。

注意，tab1初始化的时候删掉本地存的flag。

Answer 2

如一楼所说，在 Vue 实例选项 data 中添加当前标签指示器

new Vue({
  el: '#app',
  data: {
    currentTab: localStorage.getItem('currentTab') || 0,
    tabItems: [
     // 标签数据
    ]
  },
  methods: {
    // 切换标签事件
    switchTab: function(index) {
        // 相关逻辑 ...
        localStorage.setItem('currentTab', index);
    }
  }
})

大概就这样子的思路，希望能给楼主参考

Answer 3

把参数写在路由上也是一种方法