路由组件传参的过程

以下 尚硅谷Vue视频第 95章视频讲到的内容

如何将数据从 Header页面 传入到 Search页面

---

跳转路由携带参数的2种方式

	params参数    属于路径的一部分，匹配的时候路由的path 当中要照顾到这个参数，需要在路径中占位
	query参数			不属于路径的一部分，匹配的时候，路由的path 不需要照顾到这个参数

无论是 params 还是 query 参数，最终匹配完成都会解析道当前这个路由对象中 params 和 query 属性当中
显示路由的组件的时候，会把这个路由对象，传递给组件中的 this.$route ，所以 this.$route 就可以获取到之前传递的参数

this.$route.params.xxx				this.$route.query.xxx

写法

---

如果只是query传参的写法

---

注意事项

一、

注意事项
  指定params 参数时可不可以用path 和 params 配置的组合
    如果传递的参数只有 query 参数，没有params 参数，那么可以不用name，使用 Path也没有问题
    如果传递的参数包含 params 参数，就不能使用 path 去配合，只能用 name 去配置
      

（如果不用name 将会出现，页面什么数据都不显示，但是也不会报错的问题）

二、

如何让params 参数可传可不传

​ 方法： 在 path 路由尾部添加一个 ‘ ? ’占位

三、

如果指定name 与params 配置，但 params 中数据是一个 ‘ '，跳转路径会出现什么问题？

```html

会出现的问题：
路径跳转不对，一旦 params: {keyword: ‘’} ，时，跳转的路径中就会出错
如何解决：
1.首先必须在 params 参数可传可不传的前提下（就是在路径后面加上 ‘?’）
2.当传递空串的时候，传递成 ‘undefined’,就不会出现问题了
```

---

路由组件中使用props

---

以下是解释传参的路径图，实在搞不明白就需要再看一下视频