vue-element-vue修改菜单切换标签,tagsview

vue-element-vue修改菜单切换标签,tagsview

1、从 vue-element-admin 项目中复制文件到对应的项目中文件夹中

  • 将 vue-admin-template\src\layout\components\TagsView 文件夹
  • vue-admin-template\src\store\modules\tagsView.js

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、vue-admin-template\src\store\getters.js,增加:

visitedViews: state => state.tagsView.visitedViews,
cachedViews: state => state.tagsView.cachedViews,

6、修改 vue-admin-template\src\store\index.js

import tagsView from './modules/tagsView'

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

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

tagsView: true,

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

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

const state = {
  showSettings: showSettings,
  tagsView: tagsView, 
  fixedHeader: fixedHeader,
  sidebarLogo: sidebarLogo
}

9、解决控制台报错

删除vue-admin-template\src\layout\components\TagsView\index.vue中routes方法

vue-element-vue修改菜单切换标签,tagsview_第1张图片

vue-element-vue修改菜单切换标签,tagsview_第2张图片

你可能感兴趣的:(前端,vue)