Vue 商品详情页回列表页保存原数据与位置。

在一些列表中，用户查看详情后返回原来的页面，最好的体验就是从哪个位置点进来的，回去还保留在那个位置。

//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; 
    }
})