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

Posted 2021-12-28 houzhicongone

文章目录

• 路由嵌套使用
• • 1.在index.js的路由跳转的配置文件中加上你的嵌套路由配置：
  • 2.在你的点击会产生路由跳转的地方加上router-link to
  • 3.使用router-view标签显示你的路由跳转以后的内容，可以放在你的想要的位置
• 路由参数传递
• • 路径进行参数传递
  • 使用props进行参数的传递
  • 使用push也可以进行参数的传递

路由嵌套使用

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>