步骤
- 路由【index.js】先设置单页技术,注意传参path是这样写的: “/products/:kw”,并配合props:true一起写
{
path: '/products/:kw',
props:true,
name: 'products',
component: () => import('../views/Products.vue'),
},
- 在要传参的复用组件【MyHeader.vue】写data保存一个kw的值
```javascript
export default {
data() {
return {
kw:""
}
},
}
- 【MyHeader.vue】在输入框标签绑定v-modle=“kw”
<div id="top_input" class="lf">
<input
id="input"
class="input-kw"
type="text"
placeholder="请输入您要搜索的内容"
v-model="kw"
/>
- 【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这个参数就是传成功了
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/4b9d98ba6337d66c13bad53f2cb70ca4.png)