需求背景： 用户访问网站路径为 [ 首页 → 商品详情页 → 首页 ]， 此时需要缓存首页，再次返回到首页，需要展示到上次浏览的锚点位置
解决方案：
1：router + keep-alive
缺陷：一旦缓存后，无法销毁，占用内存
大致步骤： 1 路由meta中添加一个标识： meta: { title: ''， isKeepAlive: true } 2 app.vue中使用keep-alive <keep-alive :max="10"> <router-view v-if="$route.meta.isKeepAlive" /> </keep-alive> <router-view v-if="!$route.meta.isKeepAlive" /> 3 具体页面中通过 activated, deactivated钩子调用数据函数
2：router + keep-alive + vuex (推荐)
大致步骤： 1. vuex中设置需要缓存的组件名： keepAlivePage: [] 2. app.vue <keep-alive :include="keeplist" :max="10"> <router-view></router-view> </keep-alive> <script> import { mapGetters } from 'vuex' export default { computed: { ...mapGetters({ keeplist: 'getKeepAlivePage' }) } } </script> 3. store -> getters.js const getters = { getKeepAlivePage: state => { return state.keepAlivePage } } export default getters 4. store -> mutation.js const mutations = { // 缓存某个组件 cache (state, name) { if (!state.keepAlivePage.includes(name)) { state.keepAlivePage.push(name) } }, // 不缓存某个组件 uncache (state, name) { if (state.keepAlivePage.includes(name)) { state.keepAlivePage = state.keepAlivePage.filter(item => item !== name) } } } 5. router.js const routeArry = [] // 路由 const router = new VueRouter({ mode: 'history', routes: routeArry, // vue-router提供了scrollBehavior方法 scrollBehavior (to, from, savedPosition) { if (savedPosition) { return savedPosition } else { return { x: 0, y: 0 } } } }) 6. 准备工作完毕，接下来愉快的使用啦，以开头需求背景为例：home.vue import { mapMutations } from 'vuex' <script> created () { this.setKeepAlive('Home') }, methods: { ...mapMutations({ setKeepAlive: 'cache', delKeepAlive: 'uncache' }) }, beforeRouteLeave (to, from, next) { if (to.name !== 'goodsdetail') { this.delKeepAlive('Home') } next() } </script>划重点：delKeepAlive('Home') 和 setKeepAlive('Home') 中，传值一定是组件名称， 非路由name
大致思路：
进入页面，先将组件缓存下来；
通过beforeRouteLeave判断，是否为需求指定页面，如果是跳过，反之清除掉；
这样就可以及时销毁缓存啦~
