导航栏组件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实现动态导航条的更多相关文章

  1. Vue实现mp3音乐播放及动态进度条

    今天碰到一个Vue点击mp3播放及进度条动态走动的小功能,记录一下: 首先是通过HTML5 audio标签引入音频: <template> <div class="x-fo ...

  2. 使用Vue.prototype在vue中注册和使用全局变量

    在main.js中添加一个变量到Vue.prototype Vue.prototype.$appName = 'My App' 这样 $appName 就在所有的 Vue 实例中可用了,甚至在实例被创 ...

  3. Vue 2.0 + Vue Router + Vuex

    用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...

  4. Vue04——vue自定义事件、Router、Vue-cli、发布上线

    一.Vue的自定义事件 点击任何一个按钮,按钮本身计数累加,但是每点击三个按钮中的一个,totalCounter 都要累加. <body> <div id="app&quo ...

  5. vue工程化与路由router

    一.介绍     vue.js 是 目前 最火的前端框架,vue.js 兼具 angular.js 和 react.js 的优点,并剔除它们的缺点.并且提供了很多的周边配套工具 如vue-router ...

  6. vue教程3-05 vue组件数据传递、父子组件数据获取,slot,router路由

    vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...

  7. vue教程3-03 vue组件,定义全局、局部组件,配合模板,动态组件

    vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...

  8. vue+vuex+axios+echarts画一个动态更新的中国地图

    一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china- ...

  9. vue开发 - 根据vue-router的meta动态设置html里标签的内容

    路由文件 :router/index.js import Vue from 'vue'import Router from 'vue-router'import index '@/view/index ...

随机推荐

  1. [转]在WPF中自定义控件 UserControl

    在这里我们将将打造一个UserControl(用户控件)来逐步讲解如何在WPF中自定义控件,并将WPF的一些新特性引入到自定义控件中来.我们制作了一个带语音报时功能的钟表控件, 效果如下: 在VS中右 ...

  2. 每天进步一点点-WPF-根据数据类型加载控件

    目的,根据数据类型的不同,动态的加载适用于不同数据类型的控件(布局) 原理:为自定义的数据类型添加数据魔板,绑定的时候绑定这些数据类型的实例. 例子: 数据类型: 数据模板: <DataTemp ...

  3. Laravel 开发环境搭建

    本人使用的是Laravel5.5版本,需要PHP7支持,所以安装的环境是Apache2.php7.0.mysql5.7,系统为ubuntu14.04LTS(14以下的版本对php7支持不够),主要参考 ...

  4. Ruby 中文编码

    Ruby 中文编码 前面章节中我们已经学会了如何用 Ruby 输出 "Hello, World!",英文没有问题,但是如果你输出中文字符"你好,世界"就有可能会 ...

  5. 【设计】schema

    Schema:表的模式:   设计数据的表,索引,以及表和表的关系 在数据建模的基础上将关系模型转为数据库表 满足业务模型需要基础上根据数据库和应用特点优化表结构   关系模型图:   Schema关 ...

  6. NX二次开发-NXOPEN自动切换到工程图模块

    UFUN的API里是没有切换到工程图的函数的,NXOPEN里是有方法可以用的.不过应该是不支持NX9以下的版本. NX9的不能录制出来,在UI类里有方法 NX9+VS2012 #include < ...

  7. [JZOJ 5860] 荒诞

    思路: 头皮发麻的操作... 理解一下题意会发现:排名为\(i\)的前缀正好是第\(i\)个前缀. 所以问题就变成了求\(1->len\)的平方和,注意取模即可. #include <bi ...

  8. (转)python之函数介绍及使用

    为什么要用函数? 1.减少代码量 2.保持一致性 3.易维护 一.函数的定义和使用 ? 1 2 3 4 5 6 def test(参数):              ...     函数体     . ...

  9. enumrate用法

    转自*https://www.runoob.com/python/python-func-enumerate.html*侵删 描述 enumerate() 函数用于将一个可遍历的数据对象(如列表.元组 ...

  10. C 语言源代码说明

    void bdmain(void){/* 禁止 Cache 和 MMU */ cache_disable(); mmu_disable(); /* 端口初始化 */ port_init(); /* 中 ...