vue+element ui实现侧边导航栏的路由

发表评论
499 次浏览

A+

所属分类：Web前端

摘要

正在尝试用vue+element做网页，刚写了侧边导航栏，记录一下。用了element中的NavMenu 导航菜单，整个侧边导航栏都可以通过官网上的代码进行修改来实现。

便宜好用的国外VPS推荐

正在尝试用vue+element做网页，刚写了侧边导航栏，记录一下。

用了element中的NavMenu 导航菜单，整个侧边导航栏都可以通过官网上的代码进行修改来实现。

如下：

 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>  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中。

vue+element ui实现侧边导航栏的路由

在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 })