实践场景需求
- 产品列表中，滚动到一定位置的时候，点击查看产品信息，后退之后，需要回到原先的滚动位置，这是常见的需求
- 所有页面均在router-view中，暂时使用了keep-alive来缓存所有页面，所以进入不同分类的产品列表，和不同的产品详情页面，需要更新数据
首先注意：
- 本次实践测试环境为pc端的webkit内核浏览器，手机暂时不测试
- 使用$router.back(-1) 和浏览器后退按钮效果一样
- 必须使用keep-alive缓存路由页面才能记住上次的位置，否则使用浏览器后退或$router.back后退都会重新加载数据，使原来的内容高度改变
- 使用keep-alive之后，路由页面才能使用activated事件
记录上次列表滚动的高度位置，后退时恢复
思路很简章，在路由元信息中设置一个变量：scrollToTop，即标记是否要回到顶部，而我们的产品页面productList是要恢复上次滚动高度的，不回到顶部，所以设置为false
当离开路由的时候，还是判断这个变量是否为false，是则记录滚动的高度到vuex中 （所以我们这个变量有2个作用，你要维护2个也可以）
然后每当进入路由页面的时候，如果本路由的scrollToTop为false,则从vuex中读取上次记录的高度，并恢复
首先要注意一点，vue单页应用，切换路由时，滚动高度不会变，因为切换路由时只是切换了页面的内容，与滚动高度
当你在某路由页面的时候，滚动了100像素，然后切换了新的路由页面（改变了页面中的内容），只要新的路由页也可以滚动出100像素， 后退时，滚动高度不变， 这可以说是"BUG"
所以下面代码我们默认把 scrollToTop为true的设置滚动高度为0
我路由中的配置：
routes: [{
path: '/',
name: 'home',
component: Home,
meta: { title: "凤凰旅游" ,scrollToTop:true}
},
{
path: '/product',
name: 'product',
component: () => import('./views/Product.vue'),
meta: { title: "旅游" ,scrollToTop:true}
},
{
path: '/productList/:id',
name: 'productList',
component: () => import('./views/productList.vue'),
meta: { title: "列表" ,scrollToTop:false}
},
{
path: '/productShow/:id',
name: 'productShow',
component: () => import('./views/productShow.vue'),
meta: { title: "旅游产品显示" ,scrollToTop:true}
}
]
接下来在store.js中，维护一个变量用于记录
import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({
state: {
scrollTop :0
},
mutations: {
recordScrollTop(state,n){
state.scrollTop = n
}
},
actions: { }
})
在main.js中的相关路由事件里
router.beforeEach(function(to,from,next){
document.title = to.meta.title
// 要离开页面如果设置为不滚回到顶部，则本页是要记住上滚动高度到vuex中，以便下次进来恢复高度
if(from.meta.scrollToTop==false) {
store.commit('recordScrollTop', document.documentElement.scrollTop)
}
next()
})
router.afterEach((to, from) => {
// 如果进入后的页面是要滚动到顶部，则设置scrollTop = 0
//否则从vuex中读取上次离开本页面记住的高度，恢复它
if(to.meta.scrollToTop==true){
setTimeout(()=>{
document.documentElement.scrollTop =
},)
}else{
setTimeout(()=>{
document.documentElement.scrollTop = store.state.scrollTop
},)
}
});
/*
* 读取上次记录的滚动高度并且设置，必须放在router.afterEach里面
* 由于缓存了产品列表页面，每次进入会判断如果进入的是否为新的类别，则清空数据再重新加载数据，这时想设置scrollTop就无效，应该是视图渲染更新是异步的原因
* 看官方文档说调用afterEach之后，才触发 DOM 更新
* 所以afterEach里面的有涉及到DOM的操作，放在setTimeout里面,否则我试出了乱子..
*/
使用了keep-alive缓存了页面之后，当参数不同的时候，更新数据
当进入不同分类的产品列表页面，或不同id的产品页面，由于缓存了上次的结果，当然要我们来处理更新
首先上面有说到，使用了keep-alive，路由页面便可以使用activated事件，因为使用了keep-alive其它普通的生命周期只执行了一次，而activated每次显示页面都会激活（类似小程序的onShow），必须使用这个来更新
思路：在页面data中维护一个id,默认为0 ，每次进这个页面时调用activated事件，在事件时面，判断这个id是否与路由url中的参数一致
如果不一致，则根据这个id更新相关数据，并且 把data中的id,更新为新的id ,别忘了还要清空上次分类的产品数据
当然别忘了，你应该初始读取一次数据，比如在created里面， 而activated第一次创建页面时不会激活，缓存之后，第二次进入才会开始激活（我想应该是如此。。）
上代码：
activated(){
//由于缓存了本页面，每次激活页面都要判断是否重置相关参数，并重新加载数据
if(this.id !== this.$route.params.id){this.id = this.$route.params.id //更新分类id
this.curpage = 1 //初始化页面为1
this.product = [] //清空上次不同分类的产品数据
this.getProduct('/api/productList.php',this.id,this.curpage).then((res)=>{
this.ptotal = res.total
res.products.forEach((item)=>{
this.product.push (item)
})
this.loading = false
})
}
}
如果更新或更正再补充。