vue:传参的三种方式
- 字符串:
this.$router.push("/search/" + this.keyword + "?k=" + this.keyword.toUpperCase())
- 模板:
/search/${this.keyword}?k=+${this.keyword.toUpperCase()}
- 对象:
this.$router.push({name: "search",params: {keyword: this.keyword, }, query: {k: this.keyword.toUpperCase(),},})
注意:
- params参数需要在组件路由配置中添加占位符path: '/search/:keyword',
,
- 对象传参需要在组件路由配置中添加name属性name: 'search',
-//keyword?表示此字段可传可不传 path: '/search/:keyword?',
- path不可以和params一起使用,必须使用name配合
-//不可以使空串,使用undefined // params: { keyword: '' || undefined },
- 路由组件props三种写法:
1. 布尔值,只能有params参数:props:true
2. 对象写法:props:{a:1,b:2}
3. 函数写法:props:($route)=>({keyword:$route.params.keyword,k:$route.query.k})