VUE----列表页跳转到列表详情页再返回到列表页, 页面不刷新保持原来的状态 && 跳转详情页路由缓存问题

VUE----列表页跳转到列表详情页再返回到列表页, 页面不刷新保持原来的状态&& 跳转详情页路由缓存问题

第一步，在App.vue文件下加入keep-alive

<div id="app">
    <!-- 可以被缓存的视图组件 -->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <!-- 不可以被缓存的视图组件 -->
      <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>

第二步 在路由文件中 ：router/index.js，列表页面设置 meta 属性

  {
    path: '/Orderlist',
    name: 'Orderlist',
    component: () => import('@/views/Orderlist.vue'),
    meta: {
      keepAlive: true // 该路由会被缓存
    }
  },

第三步，在详情页里面设置 beforeRouteLeave，跟methods平级

beforeRouteLeave(to, from, next) {
    //设置下一个路由的meta,让列表页面缓存,即不刷新
    to.meta.keepAlive = true;
    next();
  },

第四步， 实现滚动行为的代码：router/index.js, scrollBehavior ()

const router = new VueRouter({
  mode:'hash',
  // mode:'history',
  routes,
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 } //期望滚动到哪个的位置
    }
   },
})

跳转详情页路由缓存问题

在rouer.js中设置meta

  {
    path: '/Orderdet',
    name: 'Orderdet',
    component: () => import('@/views/Orderdet.vue'),
    meta: {
      keepAlive: true // 该路由会被缓存
    },
  },

在详情页面中添加activated（）

 activated() {
    this.id = this.$route.params.id || "";
    this.getInfos();
  },