vue搜索框路由传参的方法

步骤

1. 路由【index.js】先设置单页技术，注意传参path是这样写的: “/products/:kw”,并配合props:true一起写

  {
    path: '/products/:kw',
    props:true,
    name: 'products',
    component: () => import('../views/Products.vue'),
  },

2. 在要传参的复用组件【MyHeader.vue】写data保存一个kw的值

```javascript
export default {
  data() {
            return {
                kw:""
            }
        },
}

3. 【MyHeader.vue】在输入框标签绑定v-modle=“kw”

<div id="top_input" class="lf">
        <input
          id="input"
          class="input-kw"
          type="text"
          placeholder="请输入您要搜索的内容"
          v-model="kw"
        />

4. 【MyHeader.vue】把要跳转的a标签换成router-link标签,.在router-link标签设置to属性跳转，属性值要写js形式 ：to"‘/products/’+kw"

<router-link :to="`/products/`+kw"  class="rt"
          ><img
            id="search"
            src="http://www.codeboy.com:9999/img/header/search.png"
            alt="搜索"
        /></router-link>

地址栏有kw这个参数就是传成功了