首先,对应的窗口写<router-view/>
这个代码代表占用一个窗口,子路由都会在这里面跳转

<el-container>
        <el-main>
<!--          //表示当前页面的子路由会在router-view展示-->
          <router-view/>
        </el-main>
      </el-container>
    </el-container>

然后index里配置子路由home和user(代表router-view窗口里一共需要跳转两个界面)
redirect是重定向路径,设置默认指向home(默认显示home窗口)


const routes = [
  {
    path: '/',
    name: 'Manage',
    component:()=>import('../views/Manage.vue'),
    redirect:'/home',
    children:[{
      path:'/home',
      name:'Home',
      component: () => import(/* webpackChunkName: "about" */ '../components/Home.vue')
    },{
      path:'user',
      name:'User',
      component: () => import(/* webpackChunkName: "about" */ '../components/User.vue')
    }]
  }]

然后在目标列表el-menu里写router,index里写子路径名,点击对应item自动跳转子路径

<el-menu 
           router
  >
    <el-menu-item index="home">
      <span slot="title">首页</span>
    </el-menu-item>

    <el-submenu index="1">
      <template slot="title"><i class="el-icon-message"></i>角色管理</template>
      <el-menu-item-group>
        <el-menu-item index="user" >管理员列表</el-menu-item>
      </el-menu-item-group>
  </el-menu>
Logo

前往低代码交流专区

更多推荐