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