vue-admin-template配置快捷導(dǎo)航的代碼（標(biāo)簽導(dǎo)航欄）
更新時間：2020年09月04日 10:51:47 作者：周數(shù)
這篇文章主要介紹了vue-admin-template配置快捷導(dǎo)航的方法（標(biāo)簽導(dǎo)航欄），本文通過實例代碼給大家介紹的非常詳細(xì)，對大家學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
vue-element-admin有關(guān)快捷導(dǎo)航說明
1、添加標(biāo)簽
@/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、復(fù)制admin項目中的文件
@/layout/components/TagsView
@/store/modules/tagsView.js
到template對應(yīng)的目錄下
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 //新增
}
export default getters
@store/index.js
import tagsView from './modules/tagsView' //新增
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
app,
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>
<script>
import { Navbar, Sidebar, AppMain,TagsView } from './components' //新增
@layout\components\index.js
export { default as TagsView } from './TagsView' // 新增
Affix 固釘
當(dāng)在聲明路由是 添加了 Affix 屬性，則當(dāng)前tag會被固定在 tags-view中（不可被刪除）。
{
path: '/',
component: Layout,
redirect: '/dashboard',
children: [
{
path: 'dashboard',
component: () => import('@/views/dashboard/index'),
name: 'dashboard',
meta: { title: 'dashboard', icon: 'dashboard', affix: true }
}
]
},
總結(jié)
到此這篇關(guān)于vue-admin-template配置快捷導(dǎo)航（標(biāo)簽導(dǎo)航欄）的文章就介紹到這了,更多相關(guān)vue-admin-template導(dǎo)航內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
組件是vue.js最強大的功能之一,而組件實例的作用域是相互獨立的,這就意味著不同組件之間的數(shù)據(jù)無法相互引用,這篇文章主要給大家介紹了關(guān)于Vue3的10種組件通信方式的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
這篇文章主要給大家介紹了關(guān)于vue3.0 sfc中setup變化的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2021-10-10
vue3+vite使用History路由模式打包部署項目的步驟及注意事項
這篇文章主要介紹了vue3+vite使用History路由模式打包部署項目的步驟及注意事項,配置過程包括在Vue項目中設(shè)置路由模式、調(diào)整打包配置以及Nginx服務(wù)器的配置,正確的部署配置能夠確保應(yīng)用順利運行,提升用戶體驗,需要的朋友可以參考下2024-10-10
Vue-admin-template?添加、跳轉(zhuǎn)子頁面問題
這篇文章主要介紹了Vue-admin-template?添加、跳轉(zhuǎn)子頁面問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細(xì)介紹了Vue3中v-model語法糖的三種寫法,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
這篇文章主要介紹了vue3?自定義指令控制按鈕權(quán)限,為了提高用戶體驗，當(dāng)該按鈕無權(quán)使用時，使用el-tooltip功能進(jìn)行提醒，結(jié)合實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue自定義日期組件的實現(xiàn)代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
vue項目登錄頁面實現(xiàn)記住用戶名和密碼的示例代碼
本文主要介紹了vue項目登錄頁面實現(xiàn)記住用戶名和密碼的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
vue.set向?qū)ο罄镌黾佣鄬訑?shù)組屬性不生效問題及解決
這篇文章主要介紹了vue.set向?qū)ο罄镌黾佣鄬訑?shù)組屬性不生效問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue純前端使用exceljs導(dǎo)出excel文件的完整圖文教程
這篇文章將一步一步為大家詳細(xì)介紹一下exceljs插件中的使用,以及如何使用exceljs導(dǎo)出excel文件,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-03-03