H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vuejs同一个路由下面、切换标签。实现缓存前进后退功能

我这里用的是:element ui的el-tabs组件。默认的是选中【热门】
这4个标签是写在一个页面里面的。所以我的路由都是同一个。所以在切换标签的时候。路由是不会变的。

我目前想实现的需求就是:
在点击下面的列表详情之后。
后退的时候。
不要每次都默认跳转到【热门】标签。

比如:
现在是点的【问题】标签下面的问题。
那后退的时候。标签选中的也是【问题】。
而不是默认标签、

请问解决思路是怎么样的呢?

如图:
image.png

回答:

已解决:
经大神的提点。没有使用keepalive。原因是要改动的地方比较多。主要是我也不太懂。
然后我用了2种方法可以解决问题:
第一种:改变路由(推荐)
image.png

第二种:缓存的方法(听说缓存可能会出现某些问题。虽然我暂时没有发现)
image.png

代码我传到了我的CSDN了:
https://blog.csdn.net/qq_2218…

回答:

1.使用keep-alive缓存当前页面;
2.使用sessionStorage缓存 tabs的标记,返回重新赋值;
两种都可

回答:

个人觉得比较好的是更改路由参数,比如页面路由是/list,那么切换tab的同时修改query参数,即/list?tab=qustion
jsbin-demo

本文地址:H5W3 » vuejs同一个路由下面、切换标签。实现缓存前进后退功能

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址