如果想重新整理的時候是重新整理點選的頁面 可以用快取記錄重新整理前的路由地址 然後重新整理時設定預設地址為快取的路由地址即可

處理前的情況，頁面重新整理也會停留在之前跳轉的路由頁面：

處理後的情況，頁面重新整理後頁面會跳轉至預設頁面（預設頁面為熱映）：

本文使用的是mint ui框架需要下載並引用才能與博文中樣式一致

程式碼部分：

<template>
  <div id="app">
    <router-view/>
    <mt-tabbar>
      <mt-tab-item 
        v-for
 
="(menu, index) in menuText" 
        :key="menu" 
        @click.native="menuTab(index)"
        :class="{'menuOn' : eq == index }"
      >
          <img slot="icon" :src="[ eq == index ? menuIconOn[index] : menuIconOff[index] ]" >
          {{ menu }}
      </mt-tab-item>
    </mt-tabbar
 
>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      menuText: ["熱映", "找片", "我的"], //選單列表
      menuIconOff: [
        require("./assets/img/bottomNav/meOff.svg"),
        require("./assets/img/bottomNav/seeOff.svg"),
        require("./assets/img/bottomNav/hotOff.svg"
 
)
      ], //未選中ICON路徑
      menuIconOn: [
        require("./assets/img/bottomNav/meOn.svg"),
        require("./assets/img/bottomNav/seeOn.svg"),
        require("./assets/img/bottomNav/hotOn.svg")
      ], //已選中ICON路徑
      eq: "", //當前選中選單的下標
      navUrl: ["/", "/seek", "/me"]//路由地址列表
    };
  },

  methods: {
    //獲取當前選中下標
    menuTab(index) {
      this.eq = index//儲存下標
      this.$router.push(this.navUrl[this.eq])//跳轉下標對應路由
    }
  },
  created() {
    !this.eq ? this.eq = 0 : this.eq;//若this.eq不存在則設定預設值為0
    this.$router.push(this.navUrl[this.eq])//設定路由預設地址
    if (this.navUrl[this.eq] != this.$route.path) {//若頁面載入時非初始地址 則跳轉至初始地址（主要作用是若複製當前路由連結跳轉至新視窗或另一個瀏覽器時候發揮作用）
      this.$router.push(this.navUrl[this.eq])
    }
  },
  components: {
    star
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
* {
  margin: 0;
  padding: 0;
}
ul,
li {
  list-style-type: none;
}
.menuOn {
  color: #515151 !important;
}
.mint-tabbar > .mint-tab-item.is-selected {
  background-color: #fff;
  color: #bfbfbf;
}
.mint-tabbar > .mint-tab-item.is-selected:hover {
  cursor: pointer;
}
.mint-tabbar {
  box-shadow: 0px 4px 13px rgba(0, 0, 0, 0.7);
  position: fixed;
}
</style>