首页 >web前端 >js教程 >在vue中如何才能实现前进刷新后退不刷新效果

在vue中如何才能实现前进刷新后退不刷新效果

亚连
亚连原创
2018-06-09 14:19:421646浏览

这篇文章主要介绍了vue实现前进刷新,后退不刷新效果,即加载过的界面能缓存起来(返回不用重新加载),关闭的界面能被销毁掉(再进入时重新加载)。本文给大家分享实现思路,需要的朋友可以参考下

最近在用vue尝试着做移动端的项目。希望实现前进刷新、后退不刷新的效果。即加载过的界面能缓存起来(返回不用重新加载),关闭的界面能被销毁掉(再进入时重新加载)。例如对a->b->c 前进(b,c)刷新,c->b->a 后退(b,a)不刷新。

由于 keep-alive 会把所有加载的过的界面都缓存起来,没法实现返回时将界面销毁掉,导致再进入时没有重新加载这个界面。于是首先想到的方案是在点击界面上返回按钮的时候,调用 this.$destroy(true) 来将界面销毁掉。但是在移动端 android设备上会有物理返回键,如果通过物理返回键返回的话,就没法处理了。虽然可以重写android的返回事件,来调用js的方法,但是调用的是js的全局方法,没法具体让在最上层的那个界面销毁掉。

于是就需要另辟蹊径了。还好这篇文章给了我启发 vue-router 之 keep-alive ,多谢作者的分享。

要是能够知道路由是前进还是后退就好了,这样的话我就能在后退的时候让 from 路由的 keepAlive 置为 false , to 路由的 keepAlive 置为 ture ,就能在再次前进时,重新加载之前这个 keepAlive 被置为 false 的路由了。

废话不多说了,这里模拟有三个界面 login 到 server 到 main 。

首先我给这三个界面路由的 path 设置了严格的层级关系 ,并设置keepAlive都是true,默认都是需要缓存。

const router = new Router({
 routes: [
  {
   path: '/',
   redirect: '/login'
  },
  {
   path: '/login',
   component: Login,
   meta: {
    keepAlive: true
   }
  },
  {
   path: '/login/server',
   component: ServerList,
   meta: {
    keepAlive: true
   }
  },
  {
   path: '/login/server/main',
   component: Main,
   meta: {
    keepAlive: true
   }
  }
 ]
})

由于这三个界面path的层级不同,我就能通过 beforeEach 这个钩子判断出什么时候是后退了。在后退时将 from 路由的 keepAlive 置为 false , to 路由的 keepAlive 置为 ture 。

router.beforeEach((to, from, next) => {
 const toDepth = to.path.split('/').length
 const fromDepth = from.path.split('/').length
 if (toDepth < fromDepth) {
  console.log(&#39;后退。。。&#39;)
  from.meta.keepAlive = false
  to.meta.keepAlive = true
 }
 next()
})

最后需要缓存的界面用 keep-alive 包起来,就能实现时前进刷新,后退时不刷新的效果了。

<keep-alive>
     <router-view v-if="$route.meta.keepAlive">
      <!-- 这里是会被缓存的视图组件 -->
     </router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive">
     <!-- 这里是不被缓存的视图组件 -->
    </router-view>

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

详细讲解有关实现react服务器渲染问题

利用jquery如何写出PC端轮播图(详细教程)

在Vue中通过header组件如何开发(详细教程)

以上是在vue中如何才能实现前进刷新后退不刷新效果的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn