首页 > 其他 > 详细

vue keep-alive实现前进刷新后退不刷新

时间:2019-12-26 17:57:31      阅读:133      评论:0      收藏:0      [点我收藏+]
  • App.vue 中meta对象的属性控制是否展示

 

1 <keep-alive> 
2  <router-view v-if="$route.meta.keepAlive"></router-view> 
3  </keep-alive> 
4 <router-view v-if="!$route.meta.keepAlive"></router-view>

 

 

 

  • router.js中,给需要不刷新的页面路由添加meta字段
1     path: ‘homeInfo‘,
2     name: ‘HomeInfo‘,
3     component: () => import(‘@/views/home/index‘),
4     meta: {
5       title: ‘列表页‘,
6       keepAlive: true, // 判断是否需要缓存
7       isBack: false // 判断是否为返回操作
8     }
  • 在对应的组件中
 1 activated() {
 2     if (!this.$route.meta.isBack) {
 3       // 操作,从其他页面进入时,可以操作恢复默认状态、请求接口。。。
 4       // 页码重置查询
 5  
 6     } else {
 7       // 详情页返回操作,比如页面位置
 8       //  页码不重置
 9    
10     }
11   },
12   beforeRouteEnter(to, from, next) {
13     if (from.name === ‘HomeInfo‘ ) {
14       to.meta.isBack = true
15     } else {
16       to.meta.isBack = false
17     }
18     next()
19   }
  • 注意:进入已经缓存的页面时,第一次进入,触发钩子created-> mounted-> activated,退出时触发deactivated。再次进入时,只触发activated

vue keep-alive实现前进刷新后退不刷新

原文:https://www.cnblogs.com/janet11/p/12102758.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!