路由嵌套使用
1.在index.js的路由跳转的配置文件中加上你的嵌套路由配置：
{
path:'/main',
name:'playMain',
component: importPage('playVue/playMain'),
children:[
{
path:'/member/list',
name:'MemberList',
component: importPage('playVue/playMemberList'),
},
{
path:'/member/level',
name:'MemberLevel',
component: importPage('playVue/playMemberLevel'),
},
]
},
2.在你的点击会产生路由跳转的地方加上router-link to
<el-menu-item index="1-1">
<router-link to="/member/level">会员等级</router-link></el-menu-item>
<el-menu-item index="1-2">
<router-link to="/member/list">会员列表</router-link>
</el-menu-item>
</el-menu-item-group>
3.使用router-view标签显示你的路由跳转以后的内容，可以放在你的想要的位置
路由参数传递
路径进行参数传递
- 使用路径进行参数的传递 在router-link 的to中加上你的传递的参数
<!-- 方法1.<router-link to="/member/level/1">会员等级</router-link></el-menu-item> -->
<!-- 方法二 -->
<router-link :to="{name:'MemberLevel',params:{id:3}}">会员等级</router-link></el-menu-item>
- 在配置的路由中加上你的参数传递的名字 这里为id
{
path:'/member/level/:id',
name:'MemberLevel',
component: importPage('playVue/playMemberLevel'),
props:true
},
- 取出传递的参数使用{
{$.route.params.id}} id为你的参数的名字
<div>
会员等级ID={
{
$route.params.id}}
会员等级ID={
{
id}}
</div>
使用props进行参数的传递
- 在配置的路由界面中加上props:true的属性
{
path:'/member/level/:id',
name:'MemberLevel',
component: importPage('playVue/playMemberLevel'),
props:true
},
- 在相关的.vue界面加上props:[‘你的传递的属性的名字’]
export default {
props:['id'],
name:'MemberLevel',
data(){
return{
Loading: false,
}
},
methods:{
}
}
</script>
- 直接使用{
{你的传递的属性名字}}取出来
<div>
会员等级ID={
{
$route.params.id}}
会员等级ID={
{
id}}
</div>
使用push也可以进行参数的传递
- 设置传递的参数注意一下：name:'里面为index.js你的路由的配置的名字’
this.$router.push({
name:"playMain",params:{
username:this.form.username}})
- 进行参数的接收
<span>{
{
$route.params.username}}</span>