参考文章:
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
20beforeRouteEnter (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>
最后
以上就是酷酷绿茶最近收集整理的关于vue实现前进刷新后退不刷新的全部内容,更多相关vue实现前进刷新后退不刷新内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复