Vue实现TagView标签导航栏缓存，解决重新进去页面不刷新问题

实现的效果图

一、先实现导航栏的效果

1、先在@/layout/components/Sidebar目录下新建一个组件ScrollPane.vue，把下面代码复制进去

2、在相同目录下再新建一个TagsView.vue组件，把下面代码复制进去

3、在store文件夹下新建一个tagsView.js，同样把复制代码进去

const tagsView = {
  state: {
    visitedViews: [],
    cachedViews: []
  },
  mutations: {
    ADD_VISITED_VIEWS: (state, view) => {
      if (state.visitedViews.some(v => v.path === view.path)) return
      state.visitedViews.push(Object.assign({}, view, {
        title: view.meta.title || 'no-name'
      }))
      if (!view.meta.noCache) {
        state.cachedViews.push(view.name)
      }
    },
    DEL_VISITED_VIEWS: (state, view) => {
      for (const [i, v] of state.visitedViews.entries()) {
        if (v.path === view.path) {
          state.visitedViews.splice(i, 1)
          break
        }
      }
      for (const i of state.cachedViews) {
        if (i === view.name) {
          const index = state.cachedViews.indexOf(i)
          state.cachedViews.splice(index, 1)
          break
        }
      }
    },
    DEL_OTHERS_VIEWS: (state, view) => {
      for (const [i, v] of state.visitedViews.entries()) {
        if (v.path === view.path) {
          state.visitedViews = state.visitedViews.slice(i, i + 1)
          break
        }
      }
      for (const i of state.cachedViews) {
        if (i === view.name) {
          const index = state.cachedViews.indexOf(i)
          state.cachedViews = state.cachedViews.slice(index, i + 1)
          break
        }
      }
    },
    DEL_ALL_VIEWS: (state) => {
      state.visitedViews = []
      state.cachedViews = []
    }
  },
  actions: {
    addVisitedViews({ commit }, view) {
      commit('ADD_VISITED_VIEWS', view)
    },
    delVisitedViews({ commit, state }, view) {
      return new Promise((resolve) => {
        commit('DEL_VISITED_VIEWS', view)
        resolve([...state.visitedViews])
      })
    },
    delOthersViews({ commit, state }, view) {
      return new Promise((resolve) => {
        commit('DEL_OTHERS_VIEWS', view)
        resolve([...state.visitedViews])
      })
    },
    delAllViews({ commit, state }) {
      return new Promise((resolve) => {
        commit('DEL_ALL_VIEWS')
        resolve([...state.visitedViews])
      })
    }
  }
}

export default tagsView

4、在store/index.js中引入tagsView.js

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

// 自定义模块
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
import permission from './modules/permission'
import tagsView from './modules/tagsView'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    app,
    settings,
    user,
    permission,
    tagsView
  },
  getters
})

export default store

5、在@/layout/的主组件中引入TagsView组件

二、实现重新返回页面时不刷新，保留原本页面内容

1、在@/layout/components/Sidebar下的AppMain.vue中添加如下代码

主要是通过keep-alive 和 router-view结合来实现

2、在route/index.js中为页面路由添加keepAlive为true，例如在首页

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      //在meta对象中添加key值keepAlive为true
      meta: { title: '首页', icon: 'dashboard' ,keepAlive:true} 
    }]
  }

3、还有一点很重要！！要确保组件的命名和路由的命名是一样的，不然页面不会保留原本内容，会进行自动刷新

4、退出登录时，要清除缓存可以在store/modules/user.js中添加如下代码

import store from '..'


// user logout
  logout({ commit, state }) {
    return new Promise((resolve, reject) => {
      logout().then(() => {
        removeToken() 
        resetRouter()
        store.dispatch('delAllViews') //增加多这行
        commit('RESET_STATE')
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

最后，这是项目的目录结构，红色框是新建的文件，蓝色是修改增加的文件