Vue2.5.x --- 点击路由跳转后刷新页面仍然停留在之前的路由页面解决方法

如果想刷新的时候是刷新点击的页面 可以用缓存记录刷新前的路由地址 然后刷新时设置默认地址为缓存的路由地址即可

处理前的情况，页面刷新也会停留在之前跳转的路由页面：

处理后的情况，页面刷新后页面会跳转至默认页面（默认页面为热映）：

本文使用的是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>