vue-element-admin-template单页改多标签

1、单页模式改多页模式

1、从vue-element-admin-master中的store/modules下，拷贝tagsView.js到对应目录下，

vue-admin-template\src\layout\components\TagsView 文件夹

2、修改 vue-admin-template\src\layout\components\AppMain.vue ：AppMain.vue文件，修改如下：

3、修改vue-admin-template\src\layout\components\index.js，新增如下行

export { default as TagsView } from './TagsView'

4、在 vue-admin-template\src\layout\index.vue 文件中 新增 tagsview标签

import { Navbar, Sidebar, AppMain,TagsView } from './components'

components: {
    Navbar,
    Sidebar,
    AppMain,
    TagsView //新增
},

5、修改store/index.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 tagsView from './modules/tagsView'  //新增

Vue.use(Vuex)

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

export default store

6、修改store/getters.js

const getters = {
    sidebar: state => state.app.sidebar,
    device: state => state.app.device,
    token: state => state.user.token,
    avatar: state => state.user.avatar,
    name: state => state.user.name,
    visitedViews: state => state.tagsView.visitedViews, //新增
    cachedViews: state => state.tagsView.cachedViews  //新增
}
export default getters

7、修改vue-admin-template\src\settings.js 添加

tagsView: true,

8、修改vue-admin-template\src\store\modules\settings.js

const { showSettings, fixedHeader, sidebarLogo,tagsView } = defaultSettings

const state = {
  showSettings: showSettings,
  tagsView: tagsView, //此处新增
  fixedHeader: fixedHeader,
  sidebarLogo: sidebarLogo
}

9、改动后发现报routes错误，原因是单页版本的state存储的是menu，改成routes就可以了，网络上给出的直接删除掉个人感觉不可取

routes() {
    return this.$store.state.user.routes
}

主要内容均转自：https://www.cnblogs.com/windok/p/10890715.html