vue实现前进刷新后退不刷新

104 阅读 0 评论 69 点赞

我是靠谱客的博主酷酷绿茶，这篇文章主要介绍vue实现前进刷新后退不刷新，现在分享给大家，希望可以做个参考。

参考文章：
https://blog.csdn.net/qq_40963664/article/details/80062130
要实现前进刷新后退不刷新，要借助vue的keep-alive，一定要了解钩子函数的执行顺序。
不使用keep-alive
beforeRouteEnter --> created --> mounted --> destroyed
使用keep-alive
beforeRouteEnter --> created --> mounted --> activated --> deactivated
再次进入缓存的页面
只会触发beforeRouteEnter -->activated --> deactivated
注：
created和mounted不会再执行，所以要把数据的获取放在activated函数中。
我在使用keepalive时犯得一个错误就是把keepalive的值有时设为true，有时设为false，keepalive的值应该一直都为true，但是要判断是否是页面刷新，以及是否是后退的操作，来决定activated中函数是否需要重新加载，还是取之前缓存的数据。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
	  beforeRouteEnter (to, from, next) {
          if (from.name == 'detail') {//如果页面是后退的话
            to.meta.isBack = true;//将isBack的标识改为true
            next();
          } else {
            to.meta.isBack = false;
            next();
          }
          next();
        },
        created () {
          this.isFirstEnter = true; //判断页面是否刷新
        },
        activated () {
          if (!this.$route.mate.isBack || this.isFirstEnter) {
            this.getTabledata(); //如果页面刷新或者第一次进入，重新加载数据
          }
          this.isFirstEnter = false; //把isFirstEnter 的值置为false
        }

复制代码

1
2
3
4
5
6
7
8
9
10
11
在index.js页面加上meta属性
	   {
          path: '/portal/serveSpecifice', // 服务治理规范集
          name: 'serveSpecifice',
          component: resolve => require(['@/components/pages/portal/serveSpecifice'], resolve, // 路由的懒加载
          meta: {
            keepAlive: true,
            isBack: false
          }
        }

在app.vue页面对需要缓存的页面进行缓存

复制代码

1
2
3
4
5
6
7
8
9
10
11
<keep-alive>
    <router-view v-if="$route.meta.keepAlive">
        <!-- 这里是会被缓存的视图组件 -->
    </router-view>
</keep-alive>
 
<router-view v-if="!$route.meta.keepAlive">
    <!-- 这里是不被缓存的视图组件 -->
</router-view>