vue-router传参

一、传参三种方式

1、字符串传参

this.$router.push('/search/'+this.keyword+'?q='+this.keyword.toUpperCase())

2、模板字符串传参

this.$router.push(`/search/${this.keyword}?q=${this.keyword.toUpperCase()}`)

3、对象写法，带有params参数需要注意路由配置中要有name

this.$router.push({

name:"search",

params:{keyword:this.keyword},

query:{k:this.keyword.toUpperCase()}

})

注：路由对象跳转对象写法传参时可以是name、path方式，但是path写法不能与params参数一起使用，以上三种方法均需要在路由配置时进行占位

例：

{

name:'search',

path:'/search/:keyword',  //路由占位

component:Search,

meta:{isShow:true}

}

在路由占位时在占位后面加一个?号可指定params参数传与不传------path:'/search/:keyword?'

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

当params参数可传可不传，若params参数传一个空串的话，需要使用undefined进行处理

this.$router.push({

name:"search",

params:{keyword:''||undefined},

query:{k:this.keyword.toUpperCase()}

})

二、路由组件传递props数据

三种方式

1、布尔值方式

{

      name:'search',

      path:'/search/:keyword?', //   /:keyword占位  ?params参数可传可不传

      component:Search,

      meta:{isShow:true},

 /*在组件获取数据时，通过props:[‘keyword’]传递数据，在组件中直接通过{{keyword}}获取到传递的数据，只能传递params参数*/

      props:true 

 }

2、对象写法：额外的给路由组件传递一些props数据

props:{a:1,b:2}

3、函数写法：可以params、query参数，通过props传递给路由组件

props:($route) =>{

        return {keyword:$route.params.keyword,k:$route.query.k}

 }