前进刷新,后退不刷新

首先在router/index.js中的 routes中的每一项加上

meta: {
  keepAlive: false
}

 就按好像下面一样,注意,false代表不需要缓存,true代表需要缓存

{
   path: "/teamFun",
   name: "teamFun",
   component: teamFun,
   meta: {
     keepAlive: false
   }
},

在App.vue中要这样写

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

才可以,声明周期如果需要执行多次的话,最好写在 actived生命周期中,因为created和mounted都是执行一次的,或者还需要在,beforeRouteEnter生命周期判断是哪个页面返回,在activated生命周期进行根据判断来执行相应的操作!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue中实现后退刷新前进刷新的方法有很多种,其中一种比较常用的方法是使用Vue Router中的导航守卫(Navigation Guards)。 具体实现方法如下: 1. 在Vue Router中定义路由时,给需要实现后退刷新前进刷新的路由添加 meta 属性,例如: ``` { path: '/home', name: 'home', component: Home, meta: { keepAlive: true } } ``` 2. 在 Vue 中添加导航守卫,根据 meta 属性的值设置路由的缓存状态。例如: ``` router.beforeEach((to, from, next) => { if (to.meta.keepAlive) { // 如果需要缓存,则将路由设置为缓存状态 to.meta.isKeepAlive = true; } else { // 否则不缓存 to.meta.isKeepAlive = false; } next(); }); router.afterEach((to, from) => { // 根据路由的缓存状态设置页面是否缓存 if (from.meta.isKeepAlive && !to.meta.isKeepAlive) { // 如果从缓存页跳转到非缓存页,则销毁缓存页 from.meta.keepAlive = false; from.meta.isKeepAlive = false; } else if (!from.meta.isKeepAlive && to.meta.isKeepAlive) { // 如果从非缓存页跳转到缓存页,则缓存页不刷新 to.meta.keepAlive = true; to.meta.isKeepAlive = true; } else { // 其他情况下,刷新页面 location.reload(); } }); ``` 通过上述方法,我们可以在 Vue 中实现后退刷新前进刷新的效果。当从缓存页跳转到非缓存页时,缓存页将被销毁,避免了内存泄漏;当从非缓存页跳转到缓存页时,缓存页不会刷新,提高了页面的性能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值