vue 返回不刷新的实现

 业务场景：从商场首页列表，点击进去是商品详情，从详情返回首页的时候，回到之前浏览的地方

解决方案一：利用keep-alive缓存

1.首先在app.vue页面，进行使用keep-alive的判断

<keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

2.router.ts文件，给首页加上缓存设置

{ // 首页商城页
  path: baseUrl + '/Index/index',
  name: 'index',
  component: index,
  meta: {
      linkActive: 'home',
      keepAlive: true
  }
}

3.这个时候，首页已经可以缓存了，但是避免，详情是从其他页面（不是首页进入的）进入的，首页就不需要缓存，可以加上

router.beforeEach((to: any, from: any, next: any) => {
  // 进入是详情，且从首页过来的，才缓存
  if (to.path.match('details') && from.path.match('Index/index')) {
    from.meta.keepAlive = true
  } else {
    from.meta.keepAlive = false
  }
  next()
})

目前试过这一种方法；

转载于:https://my.oschina.net/u/3950671/blog/3080438