Vue-Router前端页面缓存

情景： 页面不需要实时更新，进入页面把页面载入内存，减少不必要的请求，减轻后台压力

• 方法：使用keep-alive
  cn.vuejs.org/v2/api/#kee…

1. 添加TagesView组件(官网复制)

export { default as TagsView } from './TagsView/index.vue'

import { TagsView } from './components'

2. 添加TagesView的全局变量vuex管理

import tagsView from './modules/tagsView'

3. 需要缓存的组件放在keep-alive中 AppMain.vue

<keep-alive :include="cachedViews">
  <router-view :key="key" />
</keep-alive>

computed: {
  cachedViews() {
    return this.$store.state.tagsView.cachedViews
  }
}

4. 路由默认缓存，不缓存需添加noCache: true