vue-admin-template 添加 tagsView 组件

在学习vue-element-admin的时候，发现`vue-admin-template`没有`layout`下的`tagsView`，所以下面来记录下我添加`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`文件，新增以下内容，或者直接把`vue-element-admin`项目中对应的文件替换过来也行（我是直接替换的）

<template>
      <section class="app-main">
        <transition name="fade-transform" mode="out-in">
          <keep-alive :include="cachedViews">
              <router-view :key="key" />
          </keep-alive>
        </transition>
      </section>
    </template>
    
    
    <script>
    export default {
      name: 'AppMain',
      computed: {
        //需要缓存的页面 固钉
        cachedViews() {
          return this.$store.state.tagsView.cachedViews
        },
        key() {
          return this.$route.fullPath
        }
      }
    }
    </script>
    
    
    <style lang="scss" scoped>
    .hasTagsView {
      .app-main {
        /* 84 = navbar + tags-view = 50 + 34 */
        min-height: calc(100vh - 84px);
      }
    
      .fixed-header+.app-main {
        padding-top: 84px;
      }
    }
    </style>
    
    <style lang="scss">
    // fix css style bug in open el-dialog
    .el-popup-parent--hidden {
      .fixed-header {
        padding-right: 15px;
      }
    }
    </style>

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

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

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

<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 />
          </div>
          <tags-view />    
          <app-main />
        </div>
      </div>
    </template>
    
    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`方法

![](/uploads/editor/images/20211219/BvjdA5M2g1v9sJQwRgdYH6lkS58aHSuaM22zzPFq.png)

同时增加一个判断，因为遍历标签的时候可能会报错

![](/uploads/editor/images/20211219/t4XeoLvYOC2jYag2lfvQzSMrVFIHff2SYOByiPBx.png)

以上就是添加`tagsView`组件的步骤。

vue-admin-template 添加 tagsView 组件

PHPstorm2020.1 安装破解教程

Laravel 获取客户端真实 IP

Python 3 使用 PyMySQL 连接数据库

Laravel 关闭自动session生成会话

vue-admin-template 添加 tagsView 组件

PHPstorm2020.1 安装破解教程

Laravel 获取客户端真实 IP

Python 3 使用 PyMySQL 连接 数据库

Laravel 关闭自动session生成会话

Python 3 使用 PyMySQL 连接数据库