vue实现nav tabs标签页切换

1.页面组件tagsView.vue、scrollPane.vue

2.vuex中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

3.在store中的index.js中引入哦

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import actions from './actions'
import tagsView from './modules/tagsView'
 
Vue.use(Vuex);
 
export default new Vuex.Store({
    getters,
    actions,
    modules: {
        tagsView
    }
});

想要缓存的路由页面 keepalive要换成true哦