最近在用vue尝试着做移动端的项目。希望实现前进刷新、后退不刷新的效果。即加载过的界面能缓存起来（返回不用重新加载），关闭的界面能被销毁掉（再进入时重新加载）。例如对a->b->c 前进（b,c）刷新，c->b->a 后退（b,a）不刷新。
本文主要介绍vue实现前进刷新，后退不刷新效果,即加载过的界面能缓存起来（返回不用重新加载），关闭的界面能被销毁掉（再进入时重新加载）。本文给大家分享实现思路，需要的朋友可以参考下，希望能帮助到大家。
由于 keep-alive 会把所有加载的过的界面都缓存起来，没法实现返回时将界面销毁掉，导致再进入时没有重新加载这个界面。于是首先想到的方案是在点击界面上返回按钮的时候，调用 this.$destroy(true) 来将界面销毁掉。但是在移动端 android设备上会有物理返回键，如果通过物理返回键返回的话，就没法处理了。虽然可以重写android的返回事件，来调用js的方法，但是调用的是js的全局方法，没法具体让在最上层的那个界面销毁掉。
于是就需要另辟蹊径了。还好这篇文章给了我启发 vue-router 之 keep-alive ，多谢作者的分享。
要是能够知道路由是前进还是后退就好了，这样的话我就能在后退的时候让 from 路由的 keepAlive 置为 false ， to 路由的 keepAlive 置为 ture ，就能在再次前进时，重新加载之前这个 keepAlive 被置为 false 的路由了。
立即学习“前端免费学习笔记（深入）”；
废话不多说了，这里模拟有三个界面 login 到 server 到 main 。
一、源码特点1、采用典型的三层架构技术进行开发，作品非常不错，功能很全面，欢迎下载学习交流二、功能介绍本源码是一个购物网站源码。分为前台用户界面和后台管理员界面，分别实现不同功能。三、菜单功能前台用户功能1、主页：显示主页面2、鞋子：鞋子所有品牌及相关信息3、手机数码：数码品牌及相关信息4、护肤品：所有品牌及相关信息5、新闻资讯：本页资讯；行业资讯6、我的账户；我的收藏；我的购物车；我的评论；退出
首先我给这三个界面路由的 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 包起来，就能实现时前进刷新，后退时不刷新的效果了。
相关推荐：
