Vue - vue-admin-template模板项目改造：增加TagsView功能

GitHub Demo 地址

在线预览

更新：对应的vue3版的demo如下：

GitHub Demo 地址

在线预览

vue-admin-template模板项目4.1版本默认没有TagsView功能，需要从vue-element-admin复制粘贴TagsView相关代码
相关步骤参考：https://github.com/PanJiaChen/vue-admin-template/issues/434

TagsView效果

准备工作：

下载vue-admin-template
下载vue-element-admin

操作步骤

1、从vue-element-admin复制文件到对应位置

vue-element-admin\src\layout\components\TagsView 文件夹
vue-element-admin\src\store\modules\tagsView.js
vue-element-admin\src\views\redirect 文件夹

2、替换vue-admin-template\src\layout\components\AppMain.vue

复制以下代码直接替换AppMain.vue

<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>
.app-main {
  /* 50= navbar  50  */
  min-height: calc(100vh - 50px);
  width: 100%;
  position: relative;
  overflow: hidden;
}

.fixed-header+.app-main {
  padding-top: 50px;
}

.hasTagsView {
  .app-main {
    /* 84 = navbar + tags-view = 50 + 34 */
    min-height: calc(100vh - 84px);
  }

  .fixed-header+.app-main {
    padding-top: 84px;
  }
}
</style>

3、修改vue-admin-template\src\layout\components\index.js

新增如下行

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

4、修改vue-admin-template\src\layout\index.vue

<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="{hasTagsView:needTagsView}" class="main-container">
      <div :class="{'fixed-header':fixedHeader}">
        <navbar />
        <tags-view v-if="needTagsView"/>
      </div>
      <app-main />
    </div>
  </div>
</template>

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

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

computed 方法中新增下面代码

 needTagsView() {
   return this.$store.state.settings.tagsView
 },

5、vue-admin-template\src\store\getters.js，增加：

  // 新增tagsView
  visitedViews: state => state.tagsView.visitedViews,
  cachedViews: state => state.tagsView.cachedViews

6、vue-admin-template\src\store\index.js，增加：

import tagsView from './modules/tagsView' // 新增tagsView

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

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

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

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

8、修改vue-admin-template\src\router\index.js

路由表新增

  {
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '/redirect/:path*',
        component: () => import('@/views/redirect/index')
      }
    ]
  },

9、修改vue-admin-template\src\settings.js

  fixedHeader: true,
  sidebarLogo: true,
  tagsView: true // tagsView显隐控制

10、解决控制台报错(因为没有用到权限校验)

修改：vue-admin-template\src\layout\components\TagsView\index.vue

注释permission.routes

  computed: {
    visitedViews() {
      return this.$store.state.tagsView.visitedViews
    }
    // routes() {
    //   return this.$store.state.permission.routes
    // }
  },

routes添加判空

  if (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 }
        })
      }
      if (route.children) {
        const tempTags = this.filterAffixTags(route.children, route.path)
        if (tempTags.length >= 1) {
          tags = [...tags, ...tempTags]
        }
      }
    })
  }

至此结束