动态keep-alive

自己做了一个，从home到about时，about要做缓存，从manage进入about时about又不做缓存；

实现原理

路由跳转之前判断是否需要缓存，需要的话讲需要缓存的组件的 name 值存入一个数组，保存到vuex。app.vue 里面导入需要缓存的组件名

我是用脚手架搭建的

需要用到的东西有vue-router和vuex,实现方式如下

app.vue

<template>
  <div class="app">
    <div class="nav">
      <router-link :to="{name:'home'}">首页</router-link>
      <router-link :to="{name:'about'}">关于</router-link>
      <router-link :to="{name:'manage'}">管理</router-link>
    </div>
    <keep-alive :include="needInclude">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'app',
  data(){
    return {
      show: true
    }
  },
  computed:{
    ...mapState({
      needInclude:'needInclude'
    })
  }
}

</script>

<style>
@import "assets/css/base.css";
.nav{
  display: flex;
}
.nav a{
  flex: 1;
  text-align: center;
}
.nav a.router-link-active{
  color: red;
}
</style>

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    needInclude:[]
  },
  mutations: {
    saveNeedInclude(state,param){
      state.needInclude = param
    }
  },
  actions: {

  }
})

router.js

import Vue from 'vue'
import Router from 'vue-router'
import store from './store'

import Home from './views/index'
import About from './views/about'
import Manage from './views/manage/index'

Vue.use(Router)

let router = new Router({
  routes: [
    {
      redirect: 'home',
      path: '/'
    },
    {
      name: 'home',
      path: '/home',
      component: Home
    },
    {
      name: 'about',
      path: '/about',
      component: About,
      beforeEnter:(to,from,next)=>{
        if(from.name == 'home'){
          store.commit('saveNeedInclude',['about'])
        }else{
          store.commit('saveNeedInclude',[])
        }
        next()
      }
    },
    {
      name: 'manage',
      path: '/manage',
      component: Manage
    }
  ]
})


export default router