vue-admin-template配置快捷导航（标签导航栏）

1、添加标签

@/layout/components/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>

export default {
  name: 'AppMain',
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews  //新增
    },
    key() {
      return this.$route.path
    }
  }
}

2、复制admin项目中的文件

@/layout/components/TagsView
@/store/modules/tagsView.js
@/store/modules/permission.js
到template对应的目录下

3、修改文件

@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,  //新增
  permission_routes: state => state.permission.routes,
}
export default getters

@store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)

const modulesFiles = require.context('./modules', true, /\.js$/)

const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

const store = new Vuex.Store({
  modules,
  getters
})

export default store

@\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="main-container">
      <div :class="{'fixed-header':fixedHeader}">
        <navbar />
        <tags-view /> //新增
      </div>
      <app-main />
    </div>
  </div>
</template>

import { Navbar, Sidebar, AppMain, TagsView } from './components' //新增
import ResizeMixin from './mixin/ResizeHandler'

export default {
  name: 'Layout',
  components: {
    Navbar,
    Sidebar,
    AppMain,
    TagsView //新增
  },
  mixins: [ResizeMixin],
  computed: {
    sidebar() {
      return this.$store.state.app.sidebar
    },
    device() {
      return this.$store.state.app.device
    },
    fixedHeader() {
      return this.$store.state.settings.fixedHeader
    },
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile'
      }
    }
  },
  methods: {
    handleClickOutside() {
      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
    }
  }
}

@layout\components\index.js

export { default as TagsView } from './TagsView/index.vue' //新增

4、移除国际化

在 src/main.js 中移除 import i18n from './lang' 并且删除 src/lang 文件夹。
并在 src/layout/components/Levelbar、src/layout/components/SidebarItem、src/layout/components/TabsView 等文件夹中 移除 this.t 使用国际化的方式。

移除@layout\components\TagsView\index中 $t 的使用

<div id="tags-view-container" class="tags-view-container">
    <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
      <router-link
        v-for="tag in visitedViews"
        ref="tag"
        :key="tag.path"
        :class="isActive(tag)?'active':''"
        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
        tag="span"
        class="tags-view-item"
        @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
        @contextmenu.prevent.native="openMenu(tag,$event)"
      >
        {{tag.title}}
        <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
      </router-link>
    </scroll-pane>
    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
      <li @click="refreshSelectedTag(selectedTag)">{{ '刷新' }}</li>          //修改后的样子
      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">{{ '关闭' }}</li>            //修改后的样子
      <li @click="closeOthersTags">{{ '关闭其他' }}</li>       //修改后的样子
      <li @click="closeAllTags(selectedTag)">{{ '关闭所有' }}</li>         //修改后的样子
    </ul>
  </div>