VUE 精准控制缓存页面

[Jack]

vue 通过路由跳转时，默认会刷新页面。常用的两种路由跳转方式：

1. 向前跳转用 push
   this.$router.push('/materials')

2. 向后跳转用 back （而非我们理解的堆栈 push 和 pop）
   this.$router.back()

当遇到需要缓存的页面，可以在 App.vue 文件中指定，需要缓存的组件（页面）名称。

3. 启用缓存

<template>
  <div id="app">
    <!-- 加入需要保存状态的组件 -->
    <keep-alive include="ProjMaterialList,ProjMaterialEdit,ProjMaterialDetails">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

这样做，会出现一个问题。下次，进入页面就不会执行数据的重新加载了。因为 created 等函数都没有重新调用。这时就需要用到路由的hook函数beforeRouteEnter了。

  // 路由的 hooks
  beforeRouteEnter (to, from, next) {
    let target = from.name

    next(vm => {
      // 这里加入缓存白名单，注意：此处是路由的名称
      if (target === 'preview' || target === 'materialDetails') {
        // 当上一个页面是
        // 预览页面、详情页面
        // 时，不需要执行初始化操作
      } else {
        vm.init()
      }
    })
  },
  methods: {
    init() {
         // TODO，加载数据等方法
    }
}

于是，你就可以精确控制，不同url该不该缓存数据。