所谓的标签栏导航先看效果图

码农浅知-vue-admin-template增加标签栏导航报错踩坑记录

如果你的项目添加完控制台报以下错误，那么请仔细阅读这篇文章，可以帮你解决这个问题

1
2
**[Vue warn]: Error in mounted hook: "TypeError: this.$store.state.permission is undefined"
TypeError: this.$store.state.permission is undefined**

第一步：下载vue-admin-template-master

注意如果vue-element-admin-master下载的是4.4.0版本
相应的vue-admin-template-master也要下载4.4.0版本，其他版本没有试过，不知道会不会报错
从vue-element-admin-master中复制如下文件夹和文件
vue-element-admin-master\src\layout\components\TagsView 文件夹
vue-element-admin-master\src\store\modules\tagsView.js
文件复制到vue-admin-template-master的对应位置

注意一点，网上有教程说permission.js这个文件也要复制，其实没必要，这个是VUE的权限控制插件，有需要的时候再复制过来也不迟

第二步：修改vue-admin-template-master\src\layout\components\AppMain.vue

1
2
3
4
5
6
7
8
9
10
<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <!-- <router-view :key="key" />-->    //这个注释掉
      <keep-alive :include="cachedViews">   //新增这个标签
        <router-view :key="key" />
      </keep-alive>
    </transition>
  </section>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
export default {
  name: 'AppMain',
  computed: {
    key() {
      return this.$route.path
    },
    cachedViews(){  //新增这个方法
      return this.$store.state.tagsView.cachedViews
    }
  }
}
</script>

第三步：修改vue-admin-template-master\src\layout\components\index.js

1
export { default as TagsView } from './TagsView'    //新增一行

第四步：在vue-admin-template-master\src\layout\index.vue 文件中新增tagsView标签

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <div :class="classObj" class="app-wrapper">
    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
    <sidebar class="sidebar-container" />
    <div class="main-container">
      <div :class="{'fixed-header':fixedHeader}">
        <navbar />
        <tagsView />    //在此处新增tagsView标签
      </div>
      <app-main />
    </div>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
import { Navbar, Sidebar, AppMain, TagsView } from './components'   //新增TagsView引用
import ResizeMixin from './mixin/ResizeHandler'

export default {
  name: 'Layout',
  components: {
    Navbar,
    Sidebar,
    AppMain,
    TagsView    //新增
  },

第五步：在vue-admin-template-master\src\store\getters.js 文件中新增如下代码

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

第六步：在vue-admin-template-master\src\store\index.js 文件中新增如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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
})

第七步：在vue-admin-template-master\src\settings.js 添加

1
2
// 是否选择加载
tagsView: true

第八步：在vue-admin-template-master\src\store\modules\settings.js 添加

1
2
3
4
5
6
7
8
9
10
import defaultSettings, {tagsView} from '@/settings'    //引入

const { showSettings, fixedHeader, sidebarLogo } = defaultSettings

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

第九步：删除vue-admin-template-master\src\layout\components\TagsView\index.vue中routes方法（因为没有用到权限校验）

1
2
3
4
5
6
7
8
9
computed: {
  visitedViews() {
    return this.$store.state.tagsView.visitedViews
  },
  // 没有用到权限效验，注销掉
  /*routes() {
    return this.$store.state.permission.routes
  }*/
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
filterAffixTags(routes, basePath = '/') {
      let tags = []
      // 判断是否为空，否则控制台会报错
      if (this.routes) {
        routes.forEach(route => {
          if (route.meta && route.meta.affix) {
            const tagPath = path.resolve(basePath, route.path)
            tags.push({
              fullPath: tagPath,
              path: tagPath,
              name: route.name,
              meta: {...route.meta}
            })
          }

第十步：在vue-admin-template-master\src\router\index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  path: '/',
  component: Layout,
  redirect: '/dashboard',
  children: [{
    path: 'dashboard',
    name: 'Dashboard',
    component: () => import('@/views/dashboard/index'),
    // 删除全部标签后，会跳到404页面，所以要固定一些版面是不允许删除的。
    // 在meta中加上affix:true就能使它不可删除
    meta: { title: '首页', icon: 'dashboard', affix:true }
  }]
},