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