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()
})

目前試過這一種方法；