vue路由传参

传参形式：

1.字符串形式

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

2.模板字符串形式

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

3.对象形式：需要在路由中给对应路由中写name属性

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

对应路由中

  {
    path: "/search/:keyword",
    component: Search,
    meta: { show: true },
    name: "search",
  },

遇到的一些小问题：

Q1:路由传递参数（对象写法）时，path是否可以结合params参数一起使用？

this.$router.push({path: '/search',params: { keyword: this.keyword},query: {k:this.keyword})

不可以，路由跳转传参时，对象写法可以是name，path形式，但是path不可以与params一起使用，否则只能跳转并不能传参

Q2:如何指定params参数可传可不传，或是传递的是空串

如果路由要求传递params但是你却没有传，那么路由地址将会出现问题(比如跳转到search但是地址中没有search)

解决方法： 需要在router中对应路由中的要传递的params参数后面加上?

  {
                       //  ↓
    path: "/search/:keyword?",
    component: Search,
    meta: { show: true },
    name: "search",
  }

如果传递的是空串的话，也会出现上述问题

解决方法：使用undefined

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

Q3：路由组件能不能传递props数据

可以传递，有三种写法

布尔值写法：(只能传递params参数)  

    path: "/search/:keyword?",
    component: Search,
    meta: { show: true },
    name: "search",
    props: true

在要接收数据的组件中：props:['keyword']

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

props:[a:1,b:2]  在对应组件中：props: ['a','b']

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

props:($route)=>{
    return {keyword:$route.params.keyword,k:$route.query.k}
}

并在对应组件中：  props:['keyword', 'k']