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，默认都是需要缓存。
constrouter=newRouter({
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)=>{
consttoDepth=to.path.split('/').length
constfromDepth=from.path.split('/').length
if(toDepth
最后需要缓存的界面用keep-alive包起来，就能实现时前进刷新，后退时不刷新的效果了。
总结
以上所述是小编给大家介绍的vue实现前进刷新后退不刷新效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。