vue+elementui实现侧边导航栏的路由正在尝试⽤vue+element做⽹页，刚写了侧边导航栏，记录⼀下。
⽤了element中的，整个侧边导航栏都可以通过官⽹上的代码进⾏修改来实现。
如下：
1<el-menu id="navMenu" :router="true" unique-opened>
2<el-submenu index="1">
3<template slot="title"><i class="el-icon-user"></i>⽤户管理</template>
4<el-menu-item-group>
5<el-menu-item index="/cat/catspage">⽤户列表</el-menu-item>
6<el-menu-item index="/cat/catspage2">猫猫列表</el-menu-item>
js导航栏下拉菜单7</el-menu-item-group>
8</el-submenu>
9<el-submenu index="2">
10<template slot="title"><i class="el-icon-menu"></i>导航⼆</template>
11<el-menu-item-group>
12<template slot="title">分组⼀</template>
13<el-menu-item index="2-1">选项1</el-menu-item>
14<el-menu-item index="2-2">选项2</el-menu-item>
15</el-menu-item-group>
16<el-menu-item-group title="分组2">
17<el-menu-item index="2-3">选项3</el-menu-item>
18</el-menu-item-group>
19<el-submenu index="2-4">
20<template slot="title">选项4</template>
21<el-menu-item index="2-4-1">选项4-1</el-menu-item>
22</el-submenu>
23</el-submenu>
24</el-menu>
1<el-main id="main">
2<router-view></router-view>
3</el-main>
其中:router="true"表⽰开启路由，官⽅⽂档中有写，开启后可以直接⽤index来作为path进⾏路由跳转。
在el-main中放⼀个<router-view></router-view>，跳转的路由路径写在每⼀个index中。
在index.js中写路由：
1 import Vue from 'vue'
2 import Router from 'vue-router'
3 import HelloWorld from '@/components/HelloWorld'
4
5 import Cat from '@/components/cats/Cat'
6 import CatsPage from '@/components/cats/CatsPage'
7 import CatsPage2 from '@/components/cats/CatsPage2'
8
9 Vue.use(Router)
10
11 export default new Router({
12  routes: [{
13      path: '/cat',
14      name: 'Cat',
15      component: Cat,
16      children:[
17        {
18          path:'/cat/',
19          name:'CatMain',
20          component:require('@/components/cats/CatMain').default
21        },{
22          path:'/cat/catspage',
23          name:'CatsPage',
24          component:CatsPage
25        },{
26          path:'/cat/catspage2',
27          name:'CatsPage2',
28          component:CatsPage2
29        },
30      ]
31    }
32  ]
33 })
有两种⽅式可以设置路由，⼀种是写在最前⾯import CatsPage2 from '@/components/cats/CatsPage2'
；⼀种是在routes的compoent⾥⾯通过require('@/components/cats/CatMain').default
Cat是主页⾯，也是侧边导航栏所在的页⾯。
children⾥⾯是点击导航栏之后跳转的页⾯，也就是el-main中<router-view></router-view>指向的页⾯。
这时候已经可以实现点击导航栏显⽰对应的页⾯了。
需要注意的是CatMain这部分的path，需要设置为‘/’，才能⼀打开页⾯就显⽰⾸页，否则打开后el-main中是没有内容的。我这边Cat的路径是‘/cat’，所以我的⾸页CatMain路径就是‘/cat/’啦。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。