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

在Vue2.5.x中，遇到点击路由跳转后刷新页面仍停留在之前路由的问题。通过缓存路由地址，在刷新时设置默认地址为缓存的路由，可以解决这一问题。采用这种方法，页面刷新后将跳转至默认页面，避免了异常状态。文章提及使用了mint UI框架，需下载并引用以匹配示例的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

这里写图片描述

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

这里写图片描述

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