cache多页签缓存重点

页面name名要和路由配置里的name名一样，忘记了导致一直纠结。。。

store下 index.js

//store index.js

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

//挂载Vuex
Vue.use(Vuex)

//创建VueX对象
const store = new Vuex.Store({
    modules: {
        
      },
    // 共享状态（即变量）
    state:{
        isRenderTab: true,
        // 缓存组件页面
        catch_components: [],
        // 全局请求后台URL
        baseURL: 'http://localhost:8080',
        // 当前选中的菜单 - 默认选择首页
        activePath: 'home',
        // 菜单项 - 默认包含首页
        tabList: [
            {path: 'home', label: '控制台', name: 'home'}
        ]
    },
    // 更改vuex的store中状态的唯一方法 - 同步操作
    mutations: {
        setIsRenderTab (state, data) {
            state.isRenderTab = data
        },
        //清空vuex数据
        clearVUEX(state){
            state.catch_components = []
            state.activePath = 'home'
            state.tabList = [
                {path: 'home', label: '控制台', name: 'home'}
            ]
        },
        // 跳转页面执行
        selectMenu(state, submenu) {
            // 首页就是 wellcome   也就是 home
            if(submenu.name === 'wellcome' || submenu.name === 'home'){
                submenu.name = 'home'
                submenu.path = 'home'
            }
            // 当前选中菜单
            var activePath = submenu.name
            // 历史已选中菜单列表
            var oldTabList = state.tabList
            // 将菜单信息添加到tablist - 添加时判断是否已有该标签
            var result = oldTabList.some(item => {
                if(item.name === activePath){
                    return true 
                } 
            })
            // 如果不包含该对象，则添加
            if(!result){
                oldTabList.push({
                    path: submenu.name,
                    name: submenu.name,
                    label: submenu.label
                })
            }
            // 重新赋值
            state.activePath = activePath
            state.tabList = oldTabList
        },
        // 添加keepalive缓存
        addKeepAliveCache(state, val){
            // 如果是首页不缓存
            if(val === 'wellcome' || val === 'home'){
                return
            }
            // 添加时判断，如果该组件已存在，则不添加
            if(state.catch_components.indexOf(val) === -1) {
                // 不存在，缓存页面
                state.catch_components.push(val)
            }
        },
        // 删除keepalive缓存
        removeKeepAliveCache(state, val){
            let cache = state.catch_components
            for(let i = 0;i < cache.length;i++){
              if(cache[i] === val){
                  cache.splice(i, 1);
              }
            }
            state.catch_components = cache
        },
        //关闭菜单
        closeTab(state, val) {
            // 重新赋值
            state.activePath = val.activePath
            state.tabList = val.tabList
        },
        // 点击标签选择菜单
        changeMenu(state, val) {
            state.activePath = val
        }
    },
    // 和mutations类似，异步操作
    Action: {

    }
})

export default store

router index.js

//router index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/home.vue'
import Wellcome from '@/components/wellcome.vue'
import ViewMaterial from '@/view/ViewMaterial.vue'
import Login from '@/components/login/login.vue'
import ChangePWD from '@/components/ChangePWD/ChangePWD.vue'
import TaskDelivery from '@/view/TaskDelivery.vue'
import SweepRecord from '@/view/SweepRecord.vue'


// 引入加载条
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
// 配置
NProgress.inc()
NProgress.configure({     
    easing: 'ease',  // 动画方式    
    speed: 800,  // 递增进度条的速度    
    showSpinner: false, // 是否显示加载ico    
    trickleSpeed: 200, // 自动递增间隔    
    minimum: 0.1 // 初始化时的最小百分比
})

Vue.use(VueRouter)

// 所有人都可以访问
const routes = [
    // { path: '/home', redirect: '/home1', name: 'home1',component: Home1, meta: {title: '登录页'}},
    // { path: '/login', name: 'login', component: Login },
    {path: '/', redirect: '/login'},
    {path:'/login', component:Login},
    // { path: '/', redirect: '/home' },
    // 访问home时，重定向到wellcome页
    { path: '/changePWD', name: 'changePWD', component: ChangePWD, meta: {title: '修改密码'}},
    { path: '/home', name: 'home', component: Home, redirect: '/wellcome', meta: {title: '控制台'}, 
        children: [
        { path: '/wellcome', name: 'wellcome', component: Wellcome, meta: {title: '控制台'}}, 
        { path: '/viewMaterial', name: 'viewMaterial', component: ViewMaterial, meta: {title: '查看物料'}}, 
        { path: '/taskDelivery', name: 'taskDelivery', component: TaskDelivery, meta: {title: '任务下发'}},
        { path: '/sweepRecord', name: 'sweepRecord', component: SweepRecord, meta: {title: '扫码记录'}},
        // { path: '/login', name: 'login', component: Test5, meta: {title: '测试页面5'}},
        // { path: '/sweepRecord', name: 'sweepRecord', component: Test7, meta: {title: '测试页面7'}},
        ] 
    },
   
]

const router = new VueRouter({
  routes
})

/**
 * 挂载路由守卫
 * to 代表将要访问的路径
 * from 代表从哪个路径跳转而来
 * next 是一个函数，next() 放行。   next('/login') 强制跳转
 */
router.beforeEach((to, from, next) => {
    // 加载条
    NProgress.start()

    //放行
    next() 
})


// 挂载路由守卫 - 访问结束
router.afterEach(() => {
    // 关闭加载条
    NProgress.done()
})

export default router

home.vue

  <!-- tab标签页区域 - 用于标签页切换 -->
        <div class="tabs-switch-page">
          <el-tag
            size="medium"
            v-for="(tab, index) in tabList"
            :key="tab.name"
            @close="handleClose(tab, index)"
            @click="changeMenu(tab)"
            :closable="tab.name !== 'home'"
            :effect="activePath === tab.name ? 'dark' : 'plain'">
          {{tab.label}}
          </el-tag>
        </div>
        
      </el-header>

      <!-- 内容区 -->
      <el-main>
        <!-- 路由占位符，用于展示内容区的内容 -->
        <div style="padding:1px">
          <keep-alive :include="catch_components">
            <router-view />
          </keep-alive>
        </div>
      </el-main>

<script>
import { mapState, mapMutations } from 'vuex';
import req from '../utils/index'
import url1 from '../config/url1'
import request from '../utils/request'
export default {
  components: {
  },
  //组件被创建
  created() {
    //加载菜单
    this.loadMenu();
    this.inFormation();
  },
  computed: {
    ...mapState({ // 从 state 中的到的计算属性
       activePath: state => state.activePath, // 已选中菜单
       tabList: state => state.tabList,  // tags菜单列表
       catch_components: state => state.catch_components,  // keepalive缓存
    })
  },
  data() {
    return{
        //菜单列表
        menuList: [],
        // 折叠-展开 默认false不折叠 
        isCollapse: false,
        // 系统公告
        mottoList: [
            '等风来不如追风去，追逐的过程就是人生的意义',
            '当你想要放弃了，那就想想当初为什么开始',
            '自强之人谁也打不倒，自弃之人谁也带不动',
            '既然无法选择回去的路程，那么就清晰的面对已经造成的挑战',
            '在难过的时候，不要忘记自己还要前进',
            '人生能有几次搏？莫到白发还未博'
        ],
        information:'',
    }
  },
  methods: {
      // 右上角下拉菜单点击事件
    handleCommand(command){
      switch(command){
        // 退出
        case 'logout': 
            //消息提示
            // this.msg.success('退出登录')
            //重置vuex中的数据
            // 退出登录
            this.logOut1()
            this.$store.commit('clearVUEX')
            
          break
        case 'test':
          this.test()
          break;
        case 'request':
          this.newReq()
          break;
        //修改密码
        case 'update-password':
          this.changePWD()
          //消息提示
            // this.msg.success('修改密码')
          break
      }
    },
    // 点击折叠 展开菜单
    toggleCollapse(){
        this.isCollapse = !this.isCollapse;
    },
    // 点击菜单 - 传入name，添加到keepalive缓存页面
    selectMenu(item){
        // 加入keepalive缓存
        this.$store.commit('addKeepAliveCache', item.name)
        //添加tags标签
        //访问wellcome 就代表home
        var name = item.name === 'wellcome' ? 'home' : item.name
        var submenu = {
          path: name,
          name: name,
          label: item.label
        }
        //修改选中菜单
        this.$store.commit('selectMenu', submenu)
    },
    // 关闭tab标签
    handleClose(tab, index) {
        // 历史选中菜单
        var oldActivePath = this.$store.state.activePath
        // 历史已选中菜单列表
        var oldTabList = this.$store.state.tabList
        // 计算标签个数
        let length = oldTabList.length - 1
        // 删除tabList中的该对象
        for(let i = 0;i < oldTabList.length;i++){
            let item = oldTabList[i]
            if(item.name === tab.name){
            oldTabList.splice(i, 1);
            }
        }
        // 删除keepAlive缓存
        this.$store.commit('removeKeepAliveCache', tab.name)
        // 如果关闭的标签不是当前路由的话，就不跳转
        if (tab.name !== oldActivePath) {
            return
        }
        // 如果length为1，必然只剩下首页标签，此时关闭后，更新到首页
        if(length === 1){
            // 同时存储菜单
            this.$store.commit('closeTab', {activePath: 'home', tabList: oldTabList})
            // tab页向左跳转
            this.$router.push({ name: oldTabList[index - 1].name })
            // 不再向下执行
            return
        }
        // 关闭的标签是最右边的话，往左边跳转一个
        if (index === length) {
            // 同时更新路径
            oldActivePath = oldTabList[index - 1].name
            // 同时存储菜单
            this.$store.commit('closeTab', {activePath:oldActivePath, tabList: oldTabList})
            // tab页向左跳转
            this.$router.push({ name: oldTabList[index - 1].name })
        } else {
            // 同时更新路径
            oldActivePath = oldTabList[index].name
            // 同时存储菜单
            this.$store.commit('closeTab', {activePath:oldActivePath, tabList: oldTabList})
            // tab页向右跳转
            this.$router.push({ name: oldTabList[index].name })
        }
    },
    // 点击标签跳转路由
    changeMenu(item) {
        // 历史选中菜单
        var oldActivePath = this.$store.state.activePath
        // 首先判断点击的是否是自己，如果是自己则return
        if(oldActivePath === item.name){
            return
        }
        // 不是自己，存储菜单
        this.$store.commit('changeMenu', item.name)
        // 页面跳转
        this.$router.push({ name: item.name })
    },
    //加载菜单
    loadMenu(){
        this.menuList = [
            {
                id: 'number-01', 
                class: 'fa el-icon-document', 
                path: '/home', 
                label: '控制台', 
                name: 'home'
            },
            {
                id: 'number-02', 
                class: 'fa icon iconfont icon-chakan', 
                path: '/viewMaterial', 
                label: '查看物料', 
                name: 'viewMaterial'
            },
            {
                id: 'number-03', 
                class: 'fa icon iconfont icon-renwuxiafa', 
                path: '/taskDelivery', 
                label: '任务下发', 
                name: 'taskDelivery'
            },
            {
                id: 'number-04', 
                class: 'fa icon iconfont icon-iconfontscan', 
                path: '/sweepRecord', 
                label: '扫码记录', 
                name: 'sweepRecord'
            },
          
        ]
    }
  },
};
</script>

路由页面！！！！重点是name要和路由name一样：

 export default {
    name: 'viewMaterial',
    data() {