使用 <keep-alive> 包裹组件,可以实现缓存

当路由切换,或组件被重新激活时,会触发组件内部的 activated 钩子,此时可以更新组件。

如果路由没有变化,则 activated 钩子可能不会执行,这是就需要手动检测路由变化来更新组件,有下面几种方法:

使用组件的 beforeRouteEnter 钩子

beforeRouteEnter(to, from, next){
    next(vm=>{
        console.log(vm)
        // 每次进入路由执行
        vm.getData()
    })
},

观察 $route 变化

watch: {
  '$route'(to, from) {
    if(to.name === 'GoodsDetail') {
      // 处理更新
    }
  }
}