Vue路由传参

2023-11-13 20:19:58

Vue路由传参

vue路由传参使用场景一般应用于父路由跳转到子路由时，携带参数跳转。传参方式分为params和query传参，params传参又可分为在url中显示参数和不显示参数两种方式。
第一、params传参（显示参数） 可分为声明式和编程式
需要在子组件路由中提前占位
1、声明式（router-link）

//子组件路由
  {
    path:'/search/:keyword',
    component:Search,
  },
  //父组件路由
    <router-link to='/search/123'>进入search页面</router-link>

2、编程式（this.$router.push）

//子组件路由
  {
    path:'/search/:keyword',
    component:Search,
  },
//父组件路由
 this.$router.push('/search/' + this.keyword)

第二、params传参（不显示参数）
与前面不同的是这里是通过路由别名name进行传值的
1、声明式（router-link）

//子组件路由
  {
    name:'search',
    path:'/search',
    component:Search,
  },
//父组件编程式传参
this.$router.push({name:'search',params:{keyword:this.keyword}})

在子路由中可以通过下面代码来获取传递的参数值
this.$router.params.keyword
第三、query（显示参数）
1、声明式（router-link）

//子组件路由
  {
    name:'search',
    path:'/search',
    component:Search,
  },
//父组件编程式传参
<router-link :to='{name:'search',query:{keyword:this.keyword}'></router-link>

2、编程式 this.$router.push
该方式传值同样需要提前配置好路由别名（name属性）

//子组件路由
  {
    name:'search',
    path:'/search',
    component:Search,
  },
//父组件编程式传参
this.$router.push({name:'search',query:{keyword:this.keyword}})

在子路由中通过以下代码来获取传递的参数值
this.$router.query.keyword

路由传递参数

第一种：字符串形式

this.$router.push('/search'+this.keyword)

第二种：模板字符串

this.$router.push(` /search${this.keyword} `)

第三种：对象

this.$router.push({name:'search',query:{keyword:this.keyword}})

1 :路由传递参数(对象写法)path是否可以结合params参数一起使用

//子组件路由
{
path:'/search/:keyword',
component:Search
}
//父组件
this.$router.push({path:'/search',params{keyword:this.keyword}})

2:如何指定params参数可传可不传
答:在配置路由时候,在占位的后面加上一个问号,(paramns可以传递参数或者不传递)

this.$router.push({name:'search',query{k:this.keyword.toUpperCase()}})

3:params参数可以传递也可以不传,但如果传递的是空串,如何解决
答:使用undefined解决,params参数可以传递或者不传递(空的字符串)

this.$router.push({name:'search',params:{keyword:'' || undefined},query:{k:this.keyword.toUpperCase()}})

总结

路由传参 分为 params 和 query 传递参数
传递参数方式 又可分为字符串传递、模板字符串、对象三种方式
params方式 又可分为显示参数和不显示参数
1、显示参数需要在路由中设置占位符
2、不显示参数不用设置占位符
3、在对象传参方式中，params 不可以与 path一起使用，对象方式中，如果要使用params传递参数，需要在路由中配置对应的name属性
4、如果已经给params占位，我们可以通过占位后面添加一个“ ？”，表示params参数可传可不传参数
5、对于params参数传递空的字符串会报错，对此解决办法为使用underfined解决params参数可以传递也可以不传递（空的字符串）this.$router.push({name:"search",params:{keyWord:''||undefined},query:{k:this.keyWord}})

query方式编程式路由需要提前在路由中配置好name属性

路由组件如何传递props数据
第一种 props：true（只能传递params参数）

{
//路由组件
    name:'search',
    path:'/search/:keyword？',
    component:Search,
    meta:{showFooter:true},
    // 可以将params的值作为路由组件的属性
    props:true
  },
  //父组件          this.$router.push({name:'search',params:{keyword:this.keyword},query:{k:this.keyword.toUpperCase()}})

在子组件中可以通过props来接收使用

第二种对象方式 额外给路由组件传递props

  {
    name:'search',
    path:'/search/:keyword?',
    // path:'/search',
    component:Search,
    meta:{showFooter:true},
    // 第一种：布尔值，可以将params的值作为路由组件的属性
    // props:true,
    // 第二种：对象
    props:{a:2,b:2}
  },

第三种、函数式写法 可以将params、query参数，通过props传递给路由组件

{
    name:'search',
    path:'/search/:keyword?',
    // path:'/search',
    component:Search,
    meta:{showFooter:true},
    // 第一种：布尔值，可以将params的值作为路由组件的属性
    // props:true,
    // 第二种：对象
    // props:{a:2,b:2}
    // 第三种：函数式写法
    props:(route)=>{
      return {keyword:route.params.keyword,k:route.query.k}
    }
  },

码农公寓

Vue路由传参

路由传递参数

总结

相关文章