vue+el-menu+vue-router实现动态导航条
导航栏组件template
<template>
<div class="sidebar">
<el-menu unique-opened :default-active="$route.path" class="my-menu" router background-color="#324157" text-color="#fff" >
<template v-for="(item , index) in $router.options.routes" v-if="item.meta.menuShow">
<el-submenu :index="item.path" v-if="item.children && item.children.length > 1">
<template slot="title">
{{item.meta.menuName}}
</template>
<el-menu-item v-for="(itemChild , index) in item.children" :index="itemChild.path" :key="index" v-if="itemChild.meta.menuShow">
<span>{{itemChild.meta.menuName}}</span>
</el-menu-item>
</el-submenu>
<el-menu-item :index="item.children[0].path" v-else>
{{item.children[0].meta.menuName}}
</el-menu-item>
</template>
</el-menu>
</div>
</template>
路由文件router/index.js
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router) export default new Router({
routes: [
{
path: '/',
redirect: '/login',
meta: {
menuShow: false
}
},
{
path: '/login',
name: 'login',
component: Login,
meta: {
menuShow: false,
}
}, {
path: '/system',
name: 'system',
component: Home,
meta: {
menuShow: true, // 是否在导航栏中显示
menuName: '系统管理', // 导航栏中显示的名称
},
children: [
{
path: '/system/organization',
name: 'organization',
component: Organization,
meta: {
menuShow: true,
menuName: '组织架构',
}
},
{
path: '/system/userManage',
name: 'userManage',
component: UserManage,
meta: {
menuShow: true,
menuName: '用户管理',
}
},
{
path: '/system/systemSet',
name: 'systemSet',
component: SystemSet,
meta: {
menuShow: true,
menuName: '系统设置',
}
},
{
path: '/system/operationLog',
name: 'operationLog',
component: OperationLog,
meta: {
menuShow: true,
menuName: '操作日志',
}
},
]
},
]
})
vue+el-menu+vue-router实现动态导航条的更多相关文章
- Vue实现mp3音乐播放及动态进度条
今天碰到一个Vue点击mp3播放及进度条动态走动的小功能,记录一下: 首先是通过HTML5 audio标签引入音频: <template> <div class="x-fo ...
- 使用Vue.prototype在vue中注册和使用全局变量
在main.js中添加一个变量到Vue.prototype Vue.prototype.$appName = 'My App' 这样 $appName 就在所有的 Vue 实例中可用了,甚至在实例被创 ...
- Vue 2.0 + Vue Router + Vuex
用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...
- Vue04——vue自定义事件、Router、Vue-cli、发布上线
一.Vue的自定义事件 点击任何一个按钮,按钮本身计数累加,但是每点击三个按钮中的一个,totalCounter 都要累加. <body> <div id="app&quo ...
- vue工程化与路由router
一.介绍 vue.js 是 目前 最火的前端框架,vue.js 兼具 angular.js 和 react.js 的优点,并剔除它们的缺点.并且提供了很多的周边配套工具 如vue-router ...
- vue教程3-05 vue组件数据传递、父子组件数据获取,slot,router路由
vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...
- vue教程3-03 vue组件,定义全局、局部组件,配合模板,动态组件
vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...
- vue+vuex+axios+echarts画一个动态更新的中国地图
一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china- ...
- vue开发 - 根据vue-router的meta动态设置html里标签的内容
路由文件 :router/index.js import Vue from 'vue'import Router from 'vue-router'import index '@/view/index ...
随机推荐
- leetcode-回溯
题17: 方法一:回溯 class Solution: def letterCombinations(self, digits: str) -> List[str]: res = [] dic ...
- 8-26接口压力测试-3Jmeter-Java请求
1.新建maven工程 2.导入依赖,并使用shade将所需的依赖打入jar包 <?xml version="1.0" encoding="UTF-8"? ...
- Linux grep 后通过 | 在次grep
grep 'info' info.log|grep 'info2' 先筛选出 包含‘info’的信息,再次筛选出包含'info2'的信息
- string反向找位置,分割字符串(只取文件夹路径)
1 #include <uf.h> 2 #include <uf_part.h> 3 #include <atlstr.h> 4 #include <iost ...
- Unicode与MultiByte之间的练习: Process Cleaner
#include <cstdio> #include <cstring> #include <windows.h> #include <tlhelp32.h& ...
- 6 Accessing and Managing Symbols with armlink
6.4 Image$$ execution region symbols The linker generates Image$$ symbols for every execution region ...
- hbase 集群搭建(公司内部测试集群)
我用的是cdh4.5版本:配置文件:$HBASE_HOME/conf/hbase-env.shexport JAVA_HOME=$JAVA_HOMEexport JAVA_HOME=/home/had ...
- 2016CCPC杭州现场赛 B-Bomb /// tarjan缩点
题目大意: 给定n个爆破点的信息 x y r w 表示爆破点位置为 (x,y) 爆破范围是以位置为圆心 半径为r的圆 引爆这个点的代价为w 引爆某个点时 其他位置在该爆破范围内的爆破点也会被引爆 求引 ...
- springboot中参数校验
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring- ...
- 随笔-ansible-4
触发器: 一个任务同时调用多个触发器: 为远程主机上的用户设置环境变量: 保存前一步命令的输出结果,并保存到foo中: 添加环境变量的另一种方式: 注意:lineinfile模块只适用于修改少量环境变 ...