Vue的嵌套路由的使用和路由的传递参数

路由嵌套使用

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标签显示你的路由跳转以后的内容，可以放在你的想要的位置

路由参数传递

路径进行参数传递

1. 使用路径进行参数的传递 在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>

3. 在配置的路由中加上你的参数传递的名字 这里为id

{
  path:'/member/level/:id',
  name:'MemberLevel',
  // 需要引用上面的导入的组件
  component: importPage('playVue/playMemberLevel'),
  // 使用props进行参数的传递
  props:true

},

4. 取出传递的参数使用{{$.route.params.id}} id为你的参数的名字

<div>
    会员等级ID={{$route.params.id}}
     会员等级ID={{id}}
</div>

使用props进行参数的传递

1. 在配置的路由界面中加上props:true的属性

{
  path:'/member/level/:id',
  name:'MemberLevel',
  // 需要引用上面的导入的组件
  component: importPage('playVue/playMemberLevel'),
  // 使用props进行参数的传递
  props:true

},

2. 在相关的.vue界面加上props:[‘你的传递的属性的名字’]

export default {
  props:['id'],
    name:'MemberLevel',
  data(){
    return{
    	Loading: false,
   
    }
  },
  methods:{
 
  }
}
</script>

3. 直接使用{{你的传递的属性名字}}取出来

<div>
    会员等级ID={{$route.params.id}}
     会员等级ID={{id}}
</div>

使用push也可以进行参数的传递

1. 设置传递的参数注意一下：name:'里面为index.js你的路由的配置的名字’

  // this.$router.push("/main");
              this.$router.push({name:"playMain",params:{username:this.form.username}})

2. 进行参数的接收

   <span>{{$route.params.username}}</span>