Vue-子路由跳转

Adcsk

已于 2022-03-04 18:10:42 修改

阅读量5.3k

点赞数

文章标签： vue.js 前端 javascript

于 2022-03-02 21:49:43 首次发布

本文链接：https://blog.csdn.net/Adcsk/article/details/123241074

版权

首先，对应的窗口写<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>