Skip to content

Commit ce3168c

Browse files
committed
Update after being approved
1 parent 032b4ab commit ce3168c

File tree

1 file changed

+26
-9
lines changed

1 file changed

+26
-9
lines changed

src/v2/guide/migration-vue-router.md

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -238,23 +238,40 @@ if (route.meta.requiresAuth) {
238238
</div>
239239
{% endraw %}
240240

241-
### Route Query 数组的 [] 语法 <sup>移除</sup>
241+
### Query 数组语法 <sup>移除</sup>
242242

243-
在 URL 中 query 数组的 [] 语法已移除。例如,`/foo?users[]=Tom&users[]=Jerry` 将变成 `/foo?users=Tom&users=Jerry`
243+
当传递数组给 query 参数时,URL 语法不再是 `/foo?users[]=Tom&users[]=Jerry`,取而代之,新语法是 `/foo?users=Tom&users=Jerry`,此时 `$route.query.users` 将仍旧是一个数组,不过如果在该 query 中只有一个参数:`/foo?users=Tom`,当直接访问该路由时,vue-router 将无法知道我们期待的 `users` 是个数组。因此,可以考虑添加一个计算属性并且在每个使用 `$route.query.users` 的地方以该计算属性代替:
244244

245-
由于 vue-router 将 `?users=Tom` 处理为 `query.users == 'Tom'`,除非你确信数组中的元素将超过一个,你需要检查并在必要时转换该 query 为 数组。
245+
```javascript
246+
export default {
247+
// ... 其他组件选项
248+
computed: {
249+
// ... 其他计算属性
250+
users () { // 此计算属性将始终是个数组
251+
const users = this.$route.query.users
252+
return Array.isArray(users) ? users : [users]
253+
}
254+
}
255+
}
256+
```
246257

247-
一个可行的方案是添加如下所示的计算属性
258+
或者,如果确信该 query 是个数组,不用担心破坏 $route 对象的"原始性",对 `$router.query.users` 设置一个 watcher 是个一劳永逸的方法
248259

249260
```javascript
250-
users () {
251-
let val = this.$route.query.users
252-
return Array.isArray(val) ? val : [val]
261+
export default {
262+
// ... 其他组件选项
263+
watch: {
264+
// ... 其他 watcher
265+
'$route.query.users': {
266+
handler(val) {
267+
this.$route.query.users = Array.isArray(val) ? val : [val]
268+
},
269+
immediate: true
270+
}
271+
}
253272
}
254273
```
255274

256-
然后在用到 `this.$router.query.users` 的地方以计算属性 `users` 代替。
257-
258275
## Route 匹配
259276

260277
路由匹配现在使用 [path-to-regexp](https://github.com/pillarjs/path-to-regexp) 这个包,这将会使得工作与之前相比更加灵活。

0 commit comments

Comments
 (0)