vue实现前进刷新后退不刷新效果
最近在用vue尝试着做移动端的项目。希望实现前进刷新、后退不刷新的效果。即加载过的界面能缓存起来(返回不用重新加载),关闭的界面能被销毁掉(再进入时重新加载)。例如对a->b->c 前进(b,c)刷新,c->b->a 后退(b,a)不刷新。
由于 keep-alive
会把所有加载的过的界面都缓存起来,没法实现返回时将界面销毁掉,导致再进入时没有重新加载这个界面。于是首先想到的方案是在点击界面上返回按钮的时候,调用 this.$destroy(true)
来将界面销毁掉。但是在移动端 android设备上会有物理返回键,如果通过物理返回键返回的话,就没法处理了。虽然可以重写android的返回事件,来调用js的方法,但是调用的是js的全局方法,没法具体让在最上层的那个界面销毁掉。
于是就需要另辟蹊径了。还好这篇文章给了我启发 ,多谢作者的分享。
要是能够知道路由是前进还是后退就好了,这样的话我就能在后退的时候让 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('后退。。。') 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>
总结
以上所述是小编给大家介绍的vue实现前进刷新后退不刷新效果,希望对大家有所帮助
推荐阅读
-
vue路由前进后退动画效果的实现代码
-
Vue中keep-alive 实现后退不刷新并保持滚动位置
-
Vue 实现前进刷新后退不刷新的效果
-
vue刷新页面时去闪烁提升用户体验效果的实现方法
-
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
-
vue vue-router 完美实现前进刷新,后退不刷新。附scrollBehavior源码解析
-
vue实现移动端下拉刷新,更新幻灯片效果
-
pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新
-
sortablejs + vue的拖拽效果 列表个数不固定 刷新后保持拖拽后的效果
-
vue实现导航栏效果(选中状态刷新不消失)