vue学习：使用tab标签页时，刷新页面停留在当前tab
vue学习：使用tab标签页时，刷新页面停留在当前tab
现状：无论当前停留在哪个标签，刷新页面都会回到默认设定的标签
原始代码如下
<template>
<el-main>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="随机测试数据" name="first">
<create_random_data></create_random_data>
</el-tab-pane>
<el-tab-pane label="其他1" name="second">
<create_others></create_others>
</el-tab-pane>
<el-tab-pane label="其他2" name="third">
<create_others></create_others>
</el-tab-pane>
</el-tabs>
</el-main>
</template>
<script>
import create_random_data from "./test_data";
import create_others from "./create_others";
// console.log(create_random_data)
export default {
name: "CreateData",
components: {
create_random_data,
create_others
},
data() {
return {
activeName: 'first'
};
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
}
}
}
</script>
<style scoped>
</style>可以看到 <el-tabs> 标签中 v-model="activeName"，它和选项卡中的 name属性进行绑定；
而在 data() 中设置了activeName: 'first'，所以首次打开这个页面或者刷新页面后，都会定位到第一个标签
现在想实现这样一个效果：当处于某个标签时，刷新页面会停留在当前标签
思路：当点击某个标签时，获取到当前 name 的值，然后刷新页面时把name的值赋给activeName，这样每次刷新后activeName总能拿到上次的标签name值，也就会停留在当前页
具体实现方法：获取到标签name值时，先把name放到缓存中，之后再刷新页面时，再从缓存中取出name值赋给activeName
实现步骤
1、点击某个标签时，拿到标签对应的name值
上述原始代码中可以看到 @tab-click 绑定了 handleClick方法，每次点击标签就会触发这个方法
所以可以在这个方法中写一段代码来获取当前标签下的name
方式1:
点开 console.log(tab, event) 打印的信息，可以发现tab中有name属性
把name的值打印出来，如下
methods: {
handleClick(tab, event) {
console.log(tab, event);
console.log("当前activeName=", this.activeName)
console.log("当前name=", tab.name)
}
}
方式2:
根据element-ui中的介绍，<el-tabs>标签中的v-model是和选项卡中的 name 属性进行绑定的，当切换tab标签时，activeName的值也会变化，所以可以直接把activeName的值缓存起来就行
2、把当前name的值缓存起来
把拿到的name属性值存储到缓存中，缓存变量名为 current_name
methods: {
handleClick(tab, event) {
console.log(tab, event);
console.log("当前activeName=", this.activeName)
console.log("当前name=", tab.name)
sessionStorage.setItem('current_name', tab.name)
}
}或者
methods: {
handleClick(tab, event) {
console.log(tab, event);
console.log("当前activeName=", this.activeName)
console.log("当前name=", tab.name)
sessionStorage.setItem('current_name', this.activeName)
}
}
3、刷新页面后把activeName更新为当前标签的name属性值
添加一个钩子函数 created()，从缓存中拿到 current_name ，并把它赋给activeName
methods: {
handleClick(tab, event) {
console.log(tab, event);
console.log("当前activeName=", this.activeName)
console.log("当前name=", tab.name)
sessionStorage.setItem('current_name', tab.name)
}
},
created() {
this.activeName = sessionStorage.getItem('current_name')
}到这里的话，如果先点击一个标签，然后刷新页面，确实会停留在当前标签，切换标签后刷新，也能达到这个效果
但是如果是首次进入系统，直接点击【创建随机数据】这个菜单，会发现没有自动打开任何一个标签，因为刷新页面后是获取缓存中的name，而此时标签name的值还没有存到缓存中
我希望每次打开【创建随机数据】菜单后，默认打开第一个标签
可以通过如下方式实现：判断缓存中的 current_name 是否为null，如果为null，则给activeName赋一个初始值
methods: {
handleClick(tab, event) {
console.log(tab, event);
console.log("当前activeName=", this.activeName)
console.log("当前name=", tab.name)
sessionStorage.setItem('current_name', tab.name)
}
},
created() {
console.log("获取缓存前，activeName=", this.activeName)
if (sessionStorage.getItem('current_name') == null){
this.activeName = 'first'
}else{
this.activeName = sessionStorage.getItem('current_name')
}
console.log("获取缓存后，activeName=", this.activeName)
}OK，这样就完全达到目的了～
tips：缓存起来的current_name可以在如下位置查看
