From aa5e5c4aeac1deda123f880dd42180d0bbe61ce5 Mon Sep 17 00:00:00 2001 From: KingMario Date: Fri, 10 Mar 2017 15:53:13 +0800 Subject: [PATCH 1/9] Approach of conversion for array in query to avoid breaking change --- src/v2/guide/migration-vue-router.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/v2/guide/migration-vue-router.md b/src/v2/guide/migration-vue-router.md index d9d63c6a0d..40df388c95 100644 --- a/src/v2/guide/migration-vue-router.md +++ b/src/v2/guide/migration-vue-router.md @@ -236,6 +236,20 @@ if (route.meta.requiresAuth) { {% endraw %} +### [] Syntax for Array of Route Query removed + +In URL, [] syntax for array of query is removed. For example, `/foo?users[]=Tom&users[]=Jerry` will be `/foo?users=Tom&users=Jerry` now. + +Since vue-router will treat `?users=Tom` as `query.users == 'Tom'`, in most array-in-query cases, you should add the following kind of watcher: +```javascript +'$route.query.users': { + handler(val) { + this.$route.query.users = Array.isArray(val) ? val : [val] + }, + immediate: true +} +``` + ## Route Matching Route matching now uses [path-to-regexp](https://github.com/pillarjs/path-to-regexp) under the hood, making it much more flexible than previously. From 05a10770e24f350d3000849ecde97473e0ded85f Mon Sep 17 00:00:00 2001 From: KingMario Date: Fri, 10 Mar 2017 15:59:20 +0800 Subject: [PATCH 2/9] Minor revise --- src/v2/guide/migration-vue-router.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/migration-vue-router.md b/src/v2/guide/migration-vue-router.md index 40df388c95..433eca3a0f 100644 --- a/src/v2/guide/migration-vue-router.md +++ b/src/v2/guide/migration-vue-router.md @@ -240,7 +240,7 @@ if (route.meta.requiresAuth) { In URL, [] syntax for array of query is removed. For example, `/foo?users[]=Tom&users[]=Jerry` will be `/foo?users=Tom&users=Jerry` now. -Since vue-router will treat `?users=Tom` as `query.users == 'Tom'`, in most array-in-query cases, you should add the following kind of watcher: +Since vue-router will treat `?users=Tom` as `query.users == 'Tom'`, unless you are for sure the array will have more than one element, you should add the following kind of watcher: ```javascript '$route.query.users': { handler(val) { From ff6e6be288eba96a667c7deddf8e601bf190cfd3 Mon Sep 17 00:00:00 2001 From: KingMario Date: Fri, 10 Mar 2017 15:59:53 +0800 Subject: [PATCH 3/9] Minor revise --- src/v2/guide/migration-vue-router.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/migration-vue-router.md b/src/v2/guide/migration-vue-router.md index 433eca3a0f..29f48d039c 100644 --- a/src/v2/guide/migration-vue-router.md +++ b/src/v2/guide/migration-vue-router.md @@ -240,7 +240,7 @@ if (route.meta.requiresAuth) { In URL, [] syntax for array of query is removed. For example, `/foo?users[]=Tom&users[]=Jerry` will be `/foo?users=Tom&users=Jerry` now. -Since vue-router will treat `?users=Tom` as `query.users == 'Tom'`, unless you are for sure the array will have more than one element, you should add the following kind of watcher: +Since vue-router will treat `?users=Tom` as `query.users == 'Tom'`, unless you are for sure that the array will have more than one element, you should add the following kind of watcher: ```javascript '$route.query.users': { handler(val) { From 16d8de3ce53a02ea0527ddf7aa94e6ff70af877c Mon Sep 17 00:00:00 2001 From: KingMario Date: Fri, 10 Mar 2017 22:49:30 +0800 Subject: [PATCH 4/9] Explain more clearly --- src/v2/guide/migration-vue-router.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/v2/guide/migration-vue-router.md b/src/v2/guide/migration-vue-router.md index 29f48d039c..66b199d46f 100644 --- a/src/v2/guide/migration-vue-router.md +++ b/src/v2/guide/migration-vue-router.md @@ -240,7 +240,10 @@ if (route.meta.requiresAuth) { In URL, [] syntax for array of query is removed. For example, `/foo?users[]=Tom&users[]=Jerry` will be `/foo?users=Tom&users=Jerry` now. -Since vue-router will treat `?users=Tom` as `query.users == 'Tom'`, unless you are for sure that the array will have more than one element, you should add the following kind of watcher: +Since vue-router will treat `?users=Tom` as `query.users == 'Tom'`, unless you are for sure that the array will have more than one element, you should check and convert the query to array if necessary. + +One practical way is to add the following kind of watcher: + ```javascript '$route.query.users': { handler(val) { From 0153f7b58da527291241fdf3a4f30dfc69a8a91c Mon Sep 17 00:00:00 2001 From: KingMario Date: Sat, 11 Mar 2017 16:50:24 +0800 Subject: [PATCH 5/9] Minor revise --- src/v2/guide/migration-vue-router.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/migration-vue-router.md b/src/v2/guide/migration-vue-router.md index 66b199d46f..633878638b 100644 --- a/src/v2/guide/migration-vue-router.md +++ b/src/v2/guide/migration-vue-router.md @@ -242,7 +242,7 @@ In URL, [] syntax for array of query is removed. For example, `/foo?users[]=Tom& Since vue-router will treat `?users=Tom` as `query.users == 'Tom'`, unless you are for sure that the array will have more than one element, you should check and convert the query to array if necessary. -One practical way is to add the following kind of watcher: +One practical way is to add a watcher like this: ```javascript '$route.query.users': { From 6850013aea41a8de4bfce260ebfad47981e38379 Mon Sep 17 00:00:00 2001 From: KingMario Date: Sun, 12 Mar 2017 17:25:33 +0800 Subject: [PATCH 6/9] Use computed property instead --- src/v2/guide/migration-vue-router.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/v2/guide/migration-vue-router.md b/src/v2/guide/migration-vue-router.md index 633878638b..6d42e19089 100644 --- a/src/v2/guide/migration-vue-router.md +++ b/src/v2/guide/migration-vue-router.md @@ -242,17 +242,17 @@ In URL, [] syntax for array of query is removed. For example, `/foo?users[]=Tom& Since vue-router will treat `?users=Tom` as `query.users == 'Tom'`, unless you are for sure that the array will have more than one element, you should check and convert the query to array if necessary. -One practical way is to add a watcher like this: +One practical way is to add a computed property like this: ```javascript -'$route.query.users': { - handler(val) { - this.$route.query.users = Array.isArray(val) ? val : [val] - }, - immediate: true +users () { + let val = this.$route.query.users + return Array.isArray(val) ? val : [val] } ``` +And then replace the query reference `this.$router.query.users` to the computed `users` in the context accordingly. + ## Route Matching Route matching now uses [path-to-regexp](https://github.com/pillarjs/path-to-regexp) under the hood, making it much more flexible than previously. From b58309e816b84b843750babd366981f9de08d2a0 Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Mon, 13 Mar 2017 13:58:53 +0100 Subject: [PATCH 7/9] Update migration-vue-router.md --- src/v2/guide/migration-vue-router.md | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/src/v2/guide/migration-vue-router.md b/src/v2/guide/migration-vue-router.md index 6d42e19089..3554d02f21 100644 --- a/src/v2/guide/migration-vue-router.md +++ b/src/v2/guide/migration-vue-router.md @@ -236,22 +236,18 @@ if (route.meta.requiresAuth) { {% endraw %} -### [] Syntax for Array of Route Query removed +### [] Syntax for arrays in queries removed -In URL, [] syntax for array of query is removed. For example, `/foo?users[]=Tom&users[]=Jerry` will be `/foo?users=Tom&users=Jerry` now. - -Since vue-router will treat `?users=Tom` as `query.users == 'Tom'`, unless you are for sure that the array will have more than one element, you should check and convert the query to array if necessary. - -One practical way is to add a computed property like this: +When passing arrays to query parameters the syntax is no longer `/foo?users[]=Tom&users[]=Jerry`, instead, the new syntax is `/foo?users=Tom&users=Jerry`. Internally, `$route.query.users` will still be an Array, but if there's only one parameter in the query: `/foo?users=Tom`, when directly accessing this route, there's no way for the router to know if we were expecting `users` to be an Array. Because of this, consider using the following check: ```javascript -users () { - let val = this.$route.query.users - return Array.isArray(val) ? val : [val] -} +const users = Array.isArray(this.$route.query.users) + ? this.$route.query.users + : [this.$route.query.users] +// users will always be an array ``` -And then replace the query reference `this.$router.query.users` to the computed `users` in the context accordingly. +If you were relying on `$route.query.users` in your template, you could use this inside of a computed property. If you were using the query result in a watcher, you should apply the check there. ## Route Matching From 4055ce12d1ba3fbf2bcd9ff102facd8ab96637eb Mon Sep 17 00:00:00 2001 From: KingMario Date: Mon, 13 Mar 2017 22:54:11 +0800 Subject: [PATCH 8/9] Insist in adding a computed property --- src/v2/guide/migration-vue-router.md | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/src/v2/guide/migration-vue-router.md b/src/v2/guide/migration-vue-router.md index 3554d02f21..1d8afec18e 100644 --- a/src/v2/guide/migration-vue-router.md +++ b/src/v2/guide/migration-vue-router.md @@ -236,18 +236,24 @@ if (route.meta.requiresAuth) { {% endraw %} -### [] Syntax for arrays in queries removed +### [] Syntax for Arrays in Queries removed -When passing arrays to query parameters the syntax is no longer `/foo?users[]=Tom&users[]=Jerry`, instead, the new syntax is `/foo?users=Tom&users=Jerry`. Internally, `$route.query.users` will still be an Array, but if there's only one parameter in the query: `/foo?users=Tom`, when directly accessing this route, there's no way for the router to know if we were expecting `users` to be an Array. Because of this, consider using the following check: +When passing arrays to query parameters the QueryString syntax is no longer `/foo?users[]=Tom&users[]=Jerry`, instead, the new syntax is `/foo?users=Tom&users=Jerry`. Internally, `$route.query.users` will still be an Array, but if there's only one parameter in the query: `/foo?users=Tom`, when directly accessing this route, there's no way for the router to know if we were expecting `users` to be an Array. Because of this, consider adding a computed property and replacing every reference of `$route.query.users` with it: ```javascript -const users = Array.isArray(this.$route.query.users) - ? this.$route.query.users - : [this.$route.query.users] -// users will always be an array +export default { + // ... + computed: { + // ... + users () { // will always be an array + const val = this.$route.query.users + return Array.isArray(val) ? val : [val] + } + } +} ``` -If you were relying on `$route.query.users` in your template, you could use this inside of a computed property. If you were using the query result in a watcher, you should apply the check there. +Or simply check the query parameter before use it. ## Route Matching From 0b0805a37e020d30ca1986d2ab1f47b25053e6c4 Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Mon, 13 Mar 2017 17:44:37 +0100 Subject: [PATCH 9/9] Update migration-vue-router.md --- src/v2/guide/migration-vue-router.md | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/v2/guide/migration-vue-router.md b/src/v2/guide/migration-vue-router.md index 1d8afec18e..bfc8ee85d9 100644 --- a/src/v2/guide/migration-vue-router.md +++ b/src/v2/guide/migration-vue-router.md @@ -244,17 +244,15 @@ When passing arrays to query parameters the QueryString syntax is no longer `/fo export default { // ... computed: { - // ... - users () { // will always be an array - const val = this.$route.query.users - return Array.isArray(val) ? val : [val] + // users will always be an array + users () { + const users = this.$route.query.users + return Array.isArray(users) ? users : [users] } } } ``` -Or simply check the query parameter before use it. - ## Route Matching Route matching now uses [path-to-regexp](https://github.com/pillarjs/path-to-regexp) under the hood, making it much more flexible than previously.