現狀：無論當前停留在哪個標籤，重新整理頁面都會回到預設設定的標籤

原始程式碼如下

<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可以在如下位置檢視