最近在用 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('后退...')
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 实现前进刷新后退不刷新效果, 希望对大家有所帮助, 如果大家有任何疑问请给我留言, 小编会及时回复大家的. 在此也非常感谢大家对脚本之家网站的支持!
来源: http://www.jb51.net/article/133721.htm