路由传参-相关问题

路由传递参数(对象写法) path是否可以结合 params参数一起使用?

不可以。
  路由跳转传递参数的时候, 对象的写法可以是 name、path形式。
  但是需要注意的是, path这种写法不能与 params参数一起使用。

例：
1、path形式

this.$router.push({
	path: '/search',
	params: { keyWord: this.keyWord },
	query: { k: this.keyWord.toUpperCase() }
})

2、name形式

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

---

如何指定 params参数可传可不传?

在动态路由后面加上一个 【问号】

path: "/search/:keyWord?"

如果在配置路由的时候，在 path配置项中 使用了动态路由。
那么在跳转的时候就必须传入一个 params参数（并且值不能为空字符串）。

this.$router.push({
	name: "search",
	params: {keyWord: this.keyWord},
})

如果不传递 params参数，发现一件事情，URL会出现问题。
什么问题?
  先来看一下传递参数的URL：

  没有传递参数的URL

同时控制台也会给出警告：
missing param for named route “search”: Expected “keyWord” to be defined
缺少命名路由 search 的参数 期望被定义

虽然可以通过 name这个命名路由跳转到 指定页面，但是 URL路径地址解析不出来。
因为 params参数属于路径地址当中的一部分, 在配置路由的时候已经占位准备接收了。
但是没有接收到所以路径就出现问题了。
如何解决?
在配置路由的时候 在动态路由 后面加上一个问号【?】
可以用正则的角度来理解
表示匹配前面的一次或者0次，类似于{0,1}
例：abc(d)？ 可匹配 abc 或 abcd

---

如果 params参数传递的是空字符串, 如何解决?

用 undefined 解决：

params: {keyWord: '' || undefined},

undefined 本质是定义未赋值，也就是空
同理 null 也可以，表示空值。
而 ""空字符串，它是一个Unicode字符 %E2%80%8B 空白编码，会被URL解析。
可以在控制台调用 decodeURI('%E2%80%8B') 测试一下。