在一些列表中,用户查看详情后返回原来的页面,最好的体验就是从哪个位置点进来的,回去还保留在那个位置。
//router/index.js
//router改为history模式
export default new Router({
routes: [
{
path: '/car',
name: 'car',
meta: {
title: '二手車',
keepAlive: true,//列表页加入缓存
isBack: false,//判断是否要加载数据的依据
},
component: resolve => require(['@/components/car/car'],resolve)
},
{
path: '/carInfo',
name: 'carInfo',
meta: {
title: '車詳情',//详情不需要加入缓存
},
component: resolve => require(['@/components/car/carInfo'],resolve)
},
],
mode: 'history',
})
//car.vue
//在需要缓存的页面加两个钩子beforeRouteEnter,activated
beforeRouteEnter(to, from, next) {
//判断返回需要缓存的路由地址
if(from.name == 'carInfo') {
to.meta.isBack = true;//是否返回的判断依据改为true
}
next();//beforeRouteEnter必须携带
},
//activated会在history模式时正常执行
activated() {
//非从详情页返回时正常加载数据
if (!this.$route.meta.isBack) {
this.getList(1)//执行加载数据的方法
}
//执行完初始化isBack
this.$route.meta.isBack = false
}
//接下来保存定位
//main.js
router.afterEach((to,from,next) => {
let path = to.path;
//判断需要定位的路由地址
if(path == '/car'){
//获取储存起来的位置
let scrollTop = getCookie('scrollTop');
if(scrollTop){
setTimeout(()=>{
window.scrollTo(0,scrollTop*1);
setCookie('scrollTop',0); //定位后还原储存位置信息
},100)
}
}else{
//除了特定地址,其他的都返回顶部
setCookie('scrollTop',document.documentElement.scrollTop,1);//储存位置
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
})