javascript - Vue怎样实现任意一个tab页面刷新后不回退到第一个tab标签?
阿神
阿神 2017-05-18 11:02:28
0
3
1352

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

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

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

阿神
阿神

闭关修行中......

全部回复 (3)
漂亮男人

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

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

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

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

    phpcn_u1582

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

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

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

      洪涛

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

        最新下载
        更多>
        网站特效
        网站源码
        网站素材
        前端模板
        关于我们 免责声明 Sitemap
        PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!