路由传递参数（query、params参数）的写法、以及props数据的传递

一、路由参数的传递（3种写法）

1、字符串形式

// keyword 为 params 参数，k 为 query 参数​
this.$router.push('/search/' + this.keyword + '?k=' + this.keyword.toUpperCase());

​

2、模板字符串

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

3、对象形式（对象写法 params传参必须用name，不可以写path）

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

4、接收路由参数（在vue文件中）

<template>
  <div>
    <h1>params参数---{{$route.params.keyword}}</h1>
    <h1>query参数---{{$route.query.k}}</h1>
  </div>
</template>

二、props数据的传递

有3中写法，在配置路由时，写在 index.js 文件中：

{
      name: 'search',
      path: "/search/:keyword?",
      component: Search,
      meta: {
        isShowFooter: true
      },
      // 路由组件能不能传递props数据？
      // 布尔值写法：params 【只能传递params参数】
      // props: true,
      // 对象写法：额外给路由组件传递一些props
      // props: { a: 1, b: 2 }
      // 函数写法：可以把params参数、query参数通过props传递给路由组件
      props($route) {
        return {
          keyword: $route.params.keyword,
          k: $route.query.k
        }
      }
    },

search组件vue文件接收：

export default {
  name: 'Search',
  // 路由组件可以传递props
  props: ['keyword', 'k']
}