vue路由跳转回退后页面不刷新处理

最新推荐文章于 2025-05-09 15:23:19 发布

a_alin

最新推荐文章于 2025-05-09 15:23:19 发布

阅读量1w

点赞数 3

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： vue 缓存

本文链接：https://blog.youkuaiyun.com/a_alin/article/details/118936786

笔记专栏收录该内容

4 篇文章

订阅专栏

当Vue应用中路由回退时，页面可能不会刷新。解决这个问题可以使用`keep-alive`组件来缓存特定页面。在`app.vue`中更改`router-view`，理解不同钩子函数的执行顺序，并在需要缓存的页面中进行相应配置，如在`data`中初始化数据，在`methods`中定义获取数据的方法，以及在`router/index.js`中调整路由进入和激活的判断。在`activated`钩子中执行获取数据的方法，同时在`created`中设置首次进入或刷新的标志，以确保数据的正确加载。

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

vue路由跳转回退后页面不刷新处理

·利用keep-alive 缓存需要缓存的页面
具体实现流程
1.在app.vue中改写router-view

<keep-alive>
    <router-view v-if="$route.meta.keepAlive">
        <!-- 这里是会被缓存的视图组件，比如page,page1,page2 -->
    </router-view>
</keep-alive>

2.在router/index.js中添加路由元信息，设置需要缓存的页面

routes: [{
        path: '/',
        name: 'index',
        component: index,
        meta: {
            keepAlive: false, //此组件不需要被缓存
        }
    },
    {
        path: '/page1',
        name: 'page1',
        component: page1,
        meta: {
            keepAlive: true, //此组件需要被缓存
            
        }
    }
]

钩子函数的执行顺序

不使用keep-alive
beforeRouteEnter --> created --> mounted --> destroyed
使用keep-alive
beforeRouteEnter --> created --> mounted --> activated --> deactivated

再次进入缓存的页面，只会触发beforeRouteEnter -->activated --> deactivated 。
created和mounted不会再执行。
3. 需缓存的页面的写法

data中初始化,存放从后台获取的数据

 data() {
       return {
         Arr: []  // 加载页面后执行获取数据的方法，插入到此
       };
}

methods中创建一个方法,获取数据

 methods: {
       getData() {
         // getData方法，要保存的数据
         this.Arr = this.scrmMgroup;
       }
     }

修改router/index.js中的配置

 每次进入页面，我们都需要知晓是从哪个页面进来的，用以判断是否需要获取数据。
 在router/index.js的meta中添加isBack变量，默认false

{
          path: '/page1',
          name: 'page1',
          component: page1,
          meta: {
              keepAlive: true, //此组件需要被缓存
              isBack:false, //用于判断上一个页面是哪个
          }
      },

beforeRouteEnter中判断是从哪个页面过来的

beforeRouteEnter(to, from, next) {
      if(from.name=='posters'){
          to.meta.isBack=true;
          //判断是从哪个路由过来的，
      }
      next();
    },

activated中执行getData这个获取数据的方法

 因为这个页面需要缓存。只有第一次进入时才会执行created和mounted方法，再次进入就不执行了。而activated每次进入都执行，所以在这个钩子函数中获取数据。

activated() {
  if(!this.$route.meta.isBack){
    // 如果isBack是false，表明需要获取新数据，否则就不再请求，直接使用缓存的数据
    this.getData();
  }
  // 恢复成默认的false，避免isBack一直是true，导致下次无法获取数据
  this.$route.meta.isBack=false
},

使用keep-alive后，只有第一次进入后会触发created钩子函数，再次进入就不再执行了。当用户刷新了页面，这个钩子函数就会又执行所以可以在data中定义变量isFirstEnter用来判断是否第一次进入，或是否刷新了页面，默认false。created中把isFirstEnter变为true，说明是第一次进入或刷新了页面。activated中增加判断条件

 activated() {
     if(!this.$route.meta.isBack || this.isFirstEnter){
         // 如果isBack是false，表明需要获取新数据，否则就不再请求，直接使用缓存的数据
         // 如果isFirstEnter是true，表明是第一次进入此页面或用户刷新了页面，需获取新数据
         this.Arr=[]
         // 把数据清空，可以稍微避免让用户看到之前缓存的数据
         this.getData();
     }
     // 恢复成默认的false，避免isBack一直是true，导致下次无法获取数据
     this.$route.meta.isBack=false
     // 恢复成默认的false，避免isBack一直是true，导致每次都获取新数据
     this.isFirstEnter=false;
   },