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可以在如下位置查看