vue菜单栏及嵌套路由

vue菜单栏及嵌套路由

导航菜单

element导航菜单

嵌套路由

设置插槽，子路由下的页面可插入该处

<router-view></router-view>

菜单栏设置子路由跳转，当前位置为/，跳转位置为/xxx

<el-menu-item index="/home">
        <i class="el-icon-s-claim"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-menu-item index="/mgs">
        <i class="el-icon-user"></i>
        <span slot="title">消息</span>
      </el-menu-item>
      <el-menu-item index="/set">
        <i class="el-icon-s-tools"></i>
        <span slot="title">设置</span>
      </el-menu-item>

路由绑定跳转页面，嵌套路由跳转必须为子路由

 routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      redirect: '/applicant',
      children: [
        {
          path: '/set',
          name: 'set',
          component: Set
        },
        {
          path: '/home',
          name: 'home',
          component: Home
        },
        {
          path: '/mgs',
          name: 'mgs',
          component: Mgs
        },]
    },

  ]