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

1、添加标签

@/layout/components/AppMain.vue添加：

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

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 的使用

    
      
        {{tag.title}}
        
      
    
    

      
{{ '刷新' }}
          //修改后的样子
      
{{ '关闭' }}
            //修改后的样子
      
{{ '关闭其他' }}
       //修改后的样子
      
{{ '关闭所有' }}
         //修改后的样子