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

最新推荐文章于 2024-04-27 13:24:18 发布

YJius

最新推荐文章于 2024-04-27 13:24:18 发布

阅读量628

点赞数

分类专栏： # web前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/yingjiusheng/article/details/129399889

版权

web前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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>

2、复制admin项目中的文件到对应文件夹下

@/layout/components/TagsView
@/store/modules/tagsView.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,
  roles: state => state.user.roles,
  permission_routes: state => state.permission.routes,
  visitedviews: state => state.tagsview.visitedviews // 新增
}
export default getters

@store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import permission from './modules/permission'
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,
    permission,
    settings,
    user,
    tagsView // 新增
  },
  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' // 新增

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

@layout\components\index.js

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

Affix 固钉
当在声明路由是添加了 Affix 属性，则当前tag会被固定在 tags-view中（不可被删除）。

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: 'Dashboard', icon: 'dashboard', affix: true } // 新增
    }]
  },