如何实现路由传参

一.使用场景

1.在搜索框中输入“内容”，内容即为参数，我们的目标是使路由跳转时携带着输入的参数到另一个页面，比如点击搜索按钮，使搜索路由携带着内容参数，由主页跳转到搜索页面。

二.使用方法

1.方法一:字符串形式

• 首先，对表单中输入的数据进行双向绑定，使控制台可以接收到用户输入的数据。

• 在搜索框存在的Header界面的index.vue下的搜索框表单代码标签中加入v-model="keyword"
• 
• 在同一文件夹下的data函数中存入keyword
• 打开网页测试数据是否能得到成功传输：
•  
• 在路由配置文件（router>index.js）中找到需要传参的Search部分，在path后添加:keyword进行占位hi

• 

• 回到搜索框代码存在的文件（header>index.vue）中，在页面跳转代码中加入this.keyword以实现携带该数据传参
• 打开页面以查看效果
• 
• 以上为params参数的传递，query参数的传递方法略有不同，如下所示：
• 

2.方法二:模版字符串 

 其他步骤同上，在写法上稍做修改即可。

3.方法三:对象  （最常见）

到路由配置文件（router>index.js）中给search取个名字，如下：

 再到搜索框代码存在的文件（header>index.vue）中书写代码：

至此，路由参数的传递结束