data () { return { isDel: false // 是否进行了删除订单的操作 } }, beforeRouteLeave (to, from, next) { if (to.name == 'List') { // 根据是否删除了订单的状态，进行判断list是否需要使用缓存数据 to.meta.isUseCache = !this.isDel; } next(); }, methods: { deleteOrder () { // 这里是一些删除订单的操作 // 将状态变为已删除订单 // 所以beforeRouteLeave钩子中就会将list组件路由的isUseCache设置为false // 所以此时再返回list时，list是会重新刷新数据的 this.isDel = true; this.$router.go(-1) } }
至此，算是解决了我的vue项目中的这个前进刷新、后退缓存数据和浏览位置的问题。
最后再提一下，页面滚动位置的问题。
问题1：我们知道，在vue这种单页应用中，如果你在a页面滚动了一段距离后，此时前往b页面后，b页面也会停留在a页面的滚动位置。这个问题的解决，我们可以利用router本身提供的功能来解决：
routes: [ { path: '/detail', name: 'Detail', component: resolve => require(['@/pages/detail'], resolve) } ], scrollBehavior (to, from, savedPosition) { if (savedPosition) { return savedPosition } else { if (from.meta.keepAlive) { from.meta.savedPosition = document.body.scrollTop; } return { x: 0, y: to.meta.savedPosition || 0 } } }
scrollBehavior是路由提供的基础功能，这段函数写的是：
1.如果通过浏览器自带的前进后退按钮切换的路由，那么会自动使用浏览默认的回滚上次页面的浏览位置。
2.如果是通过vue路由进行的页面切换。例如a前往b，首先判断a是不是通过keep-alive缓存的组件，如果是，则在a路由的meta中添加一个savedPosition字段，并且值为a的滚动位置。最后return的是页面需要回滚的位置。如此一来，如果打开一个页面，该页面的组件路由中meta.savedPosition为undefined的话，则页面滚动到（0,0）的位置，这样解决了问题1。那么如果打开一个页面，它的路由的meta.savedPosition有值的话，则滚动到上次浏览的位置，因为meta.savedPosition保存的就是上次浏览的位置。
以上这篇vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: