vue-admin-template配置快捷导航的代码(标签导航栏)
(编辑:jimmy 日期: 2024/11/25 浏览:3 次 )
vue-element-admin有关快捷导航说明
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, 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 固钉
当在声明路由是 添加了 Affix 属性,则当前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 } } ] },
总结
下一篇:基于vue中的scoped坑点解说