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


Posted in Javascript onSeptember 04, 2020

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中(不可被删除)。

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

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

总结

到此这篇关于vue-admin-template配置快捷导航(标签导航栏)的文章就介绍到这了,更多相关vue-admin-template导航内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js用正则表达式来验证表单(比较齐全的资源)
Nov 17 Javascript
纯javascript实现四方向文本无缝滚动效果
Jun 16 Javascript
提升页面加载速度的插件InstantClick
Sep 12 Javascript
微信小程序实现导航栏选项卡效果
Jun 19 Javascript
深入浅析AngularJs模版与v-bind
Jul 06 Javascript
webpack4.x打包过程详解
Jul 18 Javascript
解决微信小程序防止无法回到主页的问题
Sep 28 Javascript
JavaScript中var的重要性实例分析
Jul 09 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 Javascript
JavaScript实现像雪花一样的Hexaflake分形
Jul 07 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
Aug 14 Javascript
javascript canvas实现简易时钟例子
Sep 05 Javascript
基于vue中的scoped坑点解说
Sep 04 #Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 #Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
Sep 04 #Javascript
vue-cli3中配置alias和打包加hash值操作
Sep 04 #Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
Sep 04 #Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 #Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
Sep 04 #Javascript
You might like
解析csv数据导入mysql的方法
2013/07/01 PHP
php使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串
2020/04/05 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
KindEditor在php环境下上传图片功能集成的方法示例
2020/07/20 PHP
学习YUI.Ext第五日--做拖放Darg&amp;Drop
2007/03/10 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
2013/01/27 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
类似天猫商品详情随浏览器移动的示例代码
2014/02/27 Javascript
JQuery中使文本框获得焦点的方法实例分析
2015/02/28 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
用svg制作富有动态的tooltip
2015/07/17 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
js实现浏览器倒计时跳转页面效果
2016/08/12 Javascript
详解vuex之store源码简单解析
2019/06/13 Javascript
原生js+canvas实现验证码
2020/11/29 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
Python实现动态加载模块、类、函数的方法分析
2017/07/18 Python
Python函数参数操作详解
2018/08/03 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
python mac下安装虚拟环境的图文教程
2019/04/12 Python
django修改models重建数据库的操作
2020/03/31 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
python 多线程共享全局变量的优劣
2020/09/24 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
军人违纪检讨书
2014/02/04 职场文书
自动一体化专业求职信
2014/03/15 职场文书
校园安全演讲稿
2014/05/09 职场文书
运动会加油稿20字
2014/11/15 职场文书
七年级地理教学计划
2015/01/22 职场文书
寒假社会实践个人总结
2015/03/06 职场文书
一文读懂navicat for mysql基础知识
2021/05/31 MySQL
Java基础-封装和继承
2021/07/02 Java/Android
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL