File tree Expand file tree Collapse file tree 1 file changed +26
-9
lines changed Expand file tree Collapse file tree 1 file changed +26
-9
lines changed Original file line number Diff line number Diff line change @@ -238,23 +238,40 @@ if (route.meta.requiresAuth) {
238
238
</div >
239
239
{% endraw %}
240
240
241
- ### Route Query 数组的 [ ] 语法 <sup >移除</sup >
241
+ ### Query 数组语法 <sup >移除</sup >
242
242
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 ` 的地方以该计算属性代替:
244
244
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
+ ```
246
257
247
- 一个可行的方案是添加如下所示的计算属性 :
258
+ 或者,如果确信该 query 是个数组,不用担心破坏 $route 对象的"原始性",对 ` $router.query.users ` 设置一个 watcher 是个一劳永逸的方法 :
248
259
249
260
``` 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
+ }
253
272
}
254
273
```
255
274
256
- 然后在用到 ` this.$router.query.users ` 的地方以计算属性 ` users ` 代替。
257
-
258
275
## Route 匹配
259
276
260
277
路由匹配现在使用 [ path-to-regexp] ( https://github.com/pillarjs/path-to-regexp ) 这个包,这将会使得工作与之前相比更加灵活。
You can’t perform that action at this time.
0 commit comments