详解keep-alive + vuex 让缓存的页面灵活起来

routes:[{
 path: '/search',
 name: 'search',
 component: search,
 meta: {
  title: '搜索列表页',
  keepAlive: true // 标记列表页需要被缓存
 }
},
{
 path: '/detail',
 name: 'detail',
 component: detail,
 meta: {
  title: '详情页',
  // 详情页不需要做缓存，所以不加keepAlive标记
 }
}]

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

<div id="app">
 <keep-alive exclude="detail">
  <router-view />
 </keep-alive>
</div>

<script>
export default {
 name: 'detail', // 这个name要和keep-alive中的exclude选项值一致
 ...
}
</script>

export default new Router({
 scrollBehavior (to, from, savedPosition) {
 	if (savedPosition) {
 		return savedPosition
 	} else {
 		return { x: 0, y: 0 }
 	}
 },
 routes: [...],
})

const state = {
 refreshSearch: true // 标记是否刷新搜索页
}

export default state

const matutaions = {
 setRefreshSearch(state, flag) {
  state.refreshSearch = flag
 }
}
 
export default matutaions

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'

Vue.use(Vuex)

export default new Vuex.Store({
 state,
 mutations
})

import store from './store' //这里是指向store目录中的index.js
new Vue({
 router,
 store,
 render: h => h(App)
}).$mount('#app')

<script>
import {mapState, mapMutations} from 'vuex' //vuex提供的映射函数，用来简化代码的
export default {
  activated() {
    if (this.refreshSearch) {
      // 若为true，则执行重置页面等相关操作
      this.fetchData();
    } else {
      this.reset(true);
    }
  },
  methods：{
    fetchData() {
      // 获取页面数据
    },
    ...mapMutations({
      reset: 'setRefreshSearch' // 将 `this.reset()` 映射为 `this.$store.commit('setRefreshSearch')`
    })
  },
  computed: {
    ...mapState([
      'refreshSearch' // 映射 this.refreshSearch 为 this.$store.state.refreshSearch
    ]),
  }
}
</script>

methods: {
  goDetail() {
    this.reset(false) // 这样返回搜索页的时候，搜索页就不会重置数据了
    this.$router.push({path: '/detail'})
  },
  ...mapMutations({
    reset: 'setRefreshSearch'
  })
}

methods: {
  goSearch() {
    this.reset(true) // 这样去搜索页时数据就会被重置了
    this.$router.push({path: '/search'})
  },
  ...mapMutations({
    reset: 'setRefreshSearch'
  })
}