vue element Admin - 修改瀏覽器標簽名 + 添加tagView標簽 +固定導航頭部 + 添加側邊欄Logo

1 、修改瀏覽器標簽名稱：

修改瀏覽器標簽名稱在文件：\src\settings.js

 

image.png

2 、修改固定頭部Header和側邊欄 Logo：

 

image.png

1）側邊欄文件在：\src\layout\components\Sidebar\index.vue， Sidebar組件中

 

image.png

2）修改側邊欄Log和標題在文件：src\layout\components\Sidebar\Logo.vue

 

image.png

3） 控制showLogo字段在文件 \src\settings.js中 【需要修改這個文件】

fixedHeader:true ==>為true則固定頭部，為false則滾動，
sidebarLogo: true ==>為true則顯示側邊欄logo，為false則隱藏

module.exports = {
  title: 'Vue Admin Template',

  /**
   * @type {boolean} true | false
   * @description Whether fix the header
   */
  fixedHeader: true,

  /**
   * @type {boolean} true | false
   * @description Whether show the logo in sidebar
   */
  sidebarLogo: true
}

 

注意：固定頭部除了需要改變fixedHeader:true 屬性值外，還需要在\src\layout\components\AppMain.vue添加樣式，內邊距增高

 

image.png

樣式代碼

<style lang="scss" scoped>
.app-main {
  /*50 = navbar  */
  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>

<style lang="scss">
// fix css style bug in open el-dialog
.el-popup-parent--hidden {
  .fixed-header {
    padding-right: 15px;
  }
}
</style>

 

3 、添加標簽導航欄

文檔見：https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/tags-view.html

1. 在setting.js中設置變量tagsView為true，控制tagView是否顯示
   文件路徑：src\settings.js

 /**
   * @type {boolean} true | false
   * @description Whether show the logo in sidebar
   */
  tagsView: true,

 

2. 通過store - setting.js文件控制變量 tagsView
   文件路徑：src\store\modules\settings.js
   添加引入變量

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

const state = {
  showSettings: showSettings,
  fixedHeader: fixedHeader, // 控制是否固定導航
  sidebarLogo: sidebarLogo, // 控制頭部logo是否顯示
  tagsView: tagsView  // 控制tagsView導航標簽欄是否顯示
}

 

3）此步驟可忽略
在store-index.js中暴露settings
文件路徑：src\store\index.js

import Vue from 'vue'
import Vuex from 'vuex'
import settings from './modules/settings'

Vue.use(Vuex)

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

export default store

 

4）拷貝組件tagViews
至文件路徑：src\layout\components\TagsView\index.vue

 

image.png

若是無權限路由則修改文件：src\layout\components\TagsView\index.vue里代碼，因為admin版本是權限路由，獲取路由方式不一樣，代碼return this.$router.options.routes

 

image.png

 

5）添加拷貝狀態管理文件 store

 

image.png

5.1）拷貝此文件
\src\store\modules\tagsView.js
5.2）在getter.js中添加拋出字段
文件路徑：src\store\getters.js

 

visitedViews: state => state.tagsView.visitedViews,
cachedViews: state => state.tagsView.cachedViews,

 

image.png

5.3) 引入tagView文件
文件路徑：\src\store\index.js

 

image.png

 

import Vue from 'vue'
import Vuex from 'vuex'
import tagsView from './modules/tagsView'

Vue.use(Vuex)

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

export default store

 

 

以上為引入，下面開始使用

6） 在layout - component - index.js文件中添加 引入tagViews組件
文件路徑：src\layout\components\index.js

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

 

7）添加keep-alive緩存路由

文件路徑：@/layout/components/AppMain.vue

<section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <keep-alive :include="cachedViews">
        <router-view :key="key" />
      </keep-alive>
    </transition>
  </section>

 

修改js文件

computed: {
   cachedViews() {
     return this.$store.state.tagsView.cachedViews
   },
   key() {
     console.log(this.$route.path)
     return this.$route.path
   }
 }

 

8） 修改index.js文件
文件路徑：\src\layout\components\index.js

 

image.png

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

 

9） 修改layout - index.vue文件(控制頭部是否固定、tagsview導航標簽

文件路徑：src\layout\index.vue

 

image.png

<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 v-if="needTagsView" />
      </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: {
    needTagsView() {
      console.log(this.$store.state.settings.tagsView)
      return this.$store.state.settings.tagsView
      // return true
    },
    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'
      }
    }
  },

 

9. 修改原有的dashboard為home(路由里的名稱及跳轉路徑）
   文件路徑：src\router\index.js
   注意：當在聲明路由是 添加了 Affix 屬性，則當前tag會被固定在 tags-view中（不可被刪除）。
   添加：affix: true

   
   
    

   

   image.png

10）修改文件dashboard為home
文件路徑：tests\unit\components\Breadcrumb.spec.js

最重要的一點：自己編寫的vue文件里面的name一定要和router/index.js里面的name一致，否則緩存不會生效

參考資料：https://www.jianshu.com/p/cff91fcfe861