Vue-子路由跳转
Vue的窗口子路由跳转方式
·
首先,对应的窗口写<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>
更多推荐
已为社区贡献1条内容
所有评论(0)