vue实例:element-ui导航栏通过vue-router配置多级导航菜单
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
{
path:'/home',
component:Home,
name:'导航一',
iconCls: 'el-icon-menu',
children: [
{ path: '/table', component: table, name: '表格'},
{ path: '/carousel', component: elCarousel, name: '走马灯' },
{ path: '/datepicker', component:elDatePicker, name: '时间选择' },
{ path: '/other', component:other , name: '其他' },
]
},
路由配置如上时,子路由匹配到“/table”时组件能加载出来,而不是匹配“/home/table”;
这是因为vue-router中嵌套路径以“/”开头时将被当做根路径;
{
path:'/home',
component:Home,
name:'导航一',
iconCls: 'el-icon-menu',
children: [
{ path: 'table', component: table, name: '表格'},
]
},
配置如上时,则子路由匹配“/home/table”时加载组件;
在配合elementUI组件导航栏进行路由跳转时,注意路由参数设置:el-menu-item 的 index参数决定点击时跳转的路径!
以下设置,点击导航栏才会跳转到“/home/table”。
<el-menu :default-active="$route.path" router unique-opened >
<template v-for="(item,index) in $router.options.routes">
<el-submenu :index="index+''" v-show="item.name">
<template slot="title">
<i :class="item.iconCls"></i>{{item.name}}
</template>
<el-menu-item v-for="child in item.children" :index="'/home/'+child.path" :key="child.path" >
{{child.name}}
</el-menu-item>
</el-submenu>
</template>
</el-menu>
完整示例:
路由文件router.js:
import Vue from 'vue'
import Router from 'vue-router'
const Home = () => import('@/components/HelloWorld')
const Badge = () => import('@/components/Badge')
const Progress = () => import('@/components/Progress')
const Table = () => import('@/components/Table')
const Tag = () => import('@/components/Tag')
const Chart = () => import('@/components/Chart')
const NotFound = () => import('@/components/NotFound')
const Login = () => import('@/components/Login')
const Tabs = () => import('@/components/Tabs')
const Rate = () => import('@/components/Rate')
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
component: Home,
name: 'Home',
iconCls: 'fa fa-address-card',
leaf: true,//只有一个节点
children: [
{
path: '/index',
component: Home,
name: '首页',
iconCls: 'el-icon-star-on'
}
]
},
{
path: '/',
component: Home,
name: '导航一',
iconCls: 'el-icon-s-flag',
leaf: false,
children: [
{ path: '/tabs', component: Tabs, name: 'Tabs', iconCls: 'el-icon-star-on'},
{ path: '/rate', component: Rate, name: 'Rate', iconCls: 'el-icon-star-on'}
]
},
{
path: '/',
component: Home,
name: 'Home',
iconCls: 'fa fa-address-card',
leaf: true,//只有一个节点
children: [
{
path: '/badge',
component: Badge,
name: 'Badge',
iconCls: 'el-icon-s-help'
}
]
},
{
path: '/',
component: Home,
name: 'Home',
iconCls: 'fa fa-address-card',
leaf: true,//只有一个节点
children: [
{
path: '/table',
component: Table,
name: 'Table',
iconCls: 'el-icon-upload'
}
]
},
{
path: '/',
component: Home,
name: 'Home',
iconCls: 'fa fa-address-card',
leaf: true,//只有一个节点
children: [
{
path: '/tag',
component: Tag,
name: 'Tag',
iconCls: 'el-icon-s-cooperation'
}
]
},
{
path: '/',
component: Home,
name: 'Home',
iconCls: 'fa fa-address-card',
leaf: true,//只有一个节点
children: [
{
path: '/progress',
component: Progress,
name: 'Progress',
iconCls: 'el-icon-s-order'
}
]
},
{
path: '/',
component: Home,
name: 'Home',
iconCls: 'fa fa-address-card',
leaf: true,//只有一个节点
children: [
{
path: '/chart',
component: Chart,
name: 'Chart',
iconCls: 'el-icon-s-flag'
}
]
},
{
path: '/login',
name: 'Login',
component: Login,
hidden: true
},
{
path: '*',
hidden: true,
redirect: { path: '/404' }
},
{
path: '/404',
hidden: true,
name: '',
component: NotFound
}
]
})
首页:HelloWorld.vue:
<template>
<div class="hello">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'HelloWorld'
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
其中的“<router-view></router-view>”不能缺少。
App.vue:
<template>
<div id="app">
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">
<el-row class="tac">
<el-col :span="24">
<el-menu
:default-active="$route.path"
router unique-opened
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose">
<template v-for="(item, index) in $router.options.routes" v-if="!item.hidden">
<!--二级菜单-->
<template v-if="!item.leaf" >
<el-submenu :index="index+''">
<template slot="title">
<i :class="item.iconCls"></i>
<span>{{item.name}}</span>
</template>
<el-menu-item-group>
<el-menu-item :index="child.path" :key="index" v-for="(child, index) in item.children">
{{child.name}}
</el-menu-item>
</el-menu-item-group>
</el-submenu>
</template>
<!--一级菜单-->
<template v-else>
<el-menu-item :index="child.path" :key="index" v-for="(child, index) in item.children">
<i :class="child.iconCls"></i>
<span slot="title">{{child.name}}</span>
</el-menu-item>
</template>
<!-- <subMenu v-else :data="item" :key="key"></subMenu> -->
</template>
</el-menu>
</el-col>
</el-row>
</el-aside>
<el-main>
<el-row>
<el-col :span="24">
<div class="grid-content" style="padding: 20px;">
<router-view/>
</div>
</el-col>
</el-row>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
name: 'App',
methods: {
handleOpen(key, keyPath) {
//console.log(key, keyPath);
},
handleClose(key, keyPath) {
//console.log(key, keyPath);
}
}
}
</script>
<style>
body{
margin: 0;
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
.el-header, .el-footer {
background-color: #235d8b;
color: #ffffff;
text-align: left;
line-height: 60px;
position: absolute;
top: 0;
left: 0;
height: 60px;
width: 100%;
z-index: 100;
}
.el-aside {
background-color: #4175a4;
color: #ffffff;
text-align: left;
height: 100%;
z-index: 10;
position: absolute;
left: 0;
top: 0;
padding-top: 80px;
}
.el-main {
background-color: #FFFFFF;
color: #333;
text-align: left;
height: 100%;
position: absolute;
left: 0;
top: 0;
padding-top: 80px;
padding-left: 210px;
width: 100%;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
.el-menu-vertical-demo{
background:#4175a4;
}
</style>
GitHub 加速计划 / eleme / element
54.07 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献14条内容
所有评论(0)