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

• Z时代
• 2024-01-10
• 分类：技术分享

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

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

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

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

如图：

回答

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

已解决：

data：
activeName: localStorage.getItem('activeName'),

`created() {
localStorage.setItem('activeName','hotTopic')
},`
js：
`handleClick(tab, event) {
// console.log(tab, event);
console.log(tab.paneName);
if (tab.paneName==='question'){

localStorage.setItem('activeName','question')  

}else if (tab.paneName==='topicVideo'){

localStorage.setItem('activeName','topicVideo')  

}else if (tab.paneName==='information'){

localStorage.setItem('activeName','information')  

}else{

localStorage.setItem('activeName','hotTopic')  

}
console.log(localStorage.getItem('activeName'))
},`

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

以上是 vuejs同一个路由下面、切换标签。实现缓存前进后退功能 的全部内容， 来源链接： utcz.com/a/42605.html