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 相关文章推荐
jQuery学习3:操作元素属性和特性
Feb 07 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
Jul 10 Javascript
分享一个常用的javascript静态类
Dec 31 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
Sep 16 Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 Javascript
js, jQuery实现全选、反选功能
Mar 08 Javascript
微信小程序 判断手机号的实现代码
Apr 19 Javascript
微信小程序实现之手势锁功能实例代码
Jul 19 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
Dec 28 Javascript
js实现简单放大镜效果
Mar 07 Javascript
vue-cli设置publicPath小记
Apr 14 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
php 日期时间处理函数小结
2009/12/18 PHP
jquery miniui 教程 表格控件 合并单元格应用
2012/11/25 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
2015/06/16 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
jQuery实现div横向拖拽排序的简单实例
2016/07/13 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
JS设置手机验证码60s等待实现代码
2017/06/14 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
VUEX采坑之路之获取不到$store的解决方法
2019/11/08 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛
2014/05/26 DOTA
Python实现对比不同字体中的同一字符的显示效果
2015/04/23 Python
浅谈Python单向链表的实现
2015/12/24 Python
用python爬取租房网站信息的代码
2018/12/14 Python
详解Python正则表达式re模块
2019/03/19 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
django下创建多个app并设置urls方法
2020/08/02 Python
Python多分支if语句的使用
2020/09/03 Python
美国高级工作服品牌:Carhartt
2018/01/25 全球购物
Bibloo奥地利:购买女装、男装、童装、鞋和配件
2018/10/18 全球购物
英国婴儿及儿童产品商店:TigerParrot
2019/03/04 全球购物
大学辅导员事迹材料
2014/02/05 职场文书
总经理司机岗位职责
2014/02/06 职场文书
网上卖盒饭创业计划书范文
2014/02/07 职场文书
党员目标管理责任书
2014/07/25 职场文书
干部四风问题整改措施思想汇报
2014/10/13 职场文书
2014年质检工作总结
2014/11/26 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书
写作技巧:优秀文案必备的3种结构
2019/08/19 职场文书
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android