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

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

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

如下：

        <el-menu id="navMenu" :router="true" unique-opened>      
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-user"></i>用户管理</template>
            <el-menu-item-group>
              <el-menu-item index="/cat/catspage">用户列表</el-menu-item>
              <el-menu-item index="/cat/catspage2">猫猫列表</el-menu-item>
            </el-menu-item-group> 
          </el-submenu>          
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-menu"></i>导航二</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="2-1">选项1</el-menu-item>
              <el-menu-item index="2-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="2-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="2-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>          
        </el-menu>

        <el-main id="main">         
          <router-view></router-view>
        </el-main>

其中:router="true"表示开启路由，官方文档中有写，开启后可以直接用index来作为path进行路由跳转。
在el-main中放一个<router-view></router-view>，跳转的路由路径写在每一个index中。

在index.js中写路由：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

import Cat from '@/components/cats/Cat'
import CatsPage from '@/components/cats/CatsPage'
import CatsPage2 from '@/components/cats/CatsPage2'

Vue.use(Router)

export default new Router({
  routes: [{
      path: '/cat',
      name: 'Cat',
      component: Cat,
      children:[
        {
          path:'/cat/',
          name:'CatMain',
          component:require('@/components/cats/CatMain').default
        },{
          path:'/cat/catspage',
          name:'CatsPage',
          component:CatsPage
        },{
          path:'/cat/catspage2',
          name:'CatsPage2',
          component:CatsPage2
        },
      ]
    }
  ]
})

有两种方式可以设置路由，一种是写在最前面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/’啦。