You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/guide/migration-vue-router.md
+28-28Lines changed: 28 additions & 28 deletions
Original file line number
Diff line number
Diff line change
@@ -8,7 +8,7 @@ order: 26
8
8
9
9
## Router Initialization
10
10
11
-
### `router.start` <sup>deprecated</sup>
11
+
### `router.start` <sup>replaced</sup>
12
12
13
13
There is no longer a special API to initialize an app with Vue Router. That means instead of:
14
14
@@ -47,7 +47,7 @@ new Vue({
47
47
48
48
## Route Definitions
49
49
50
-
### `router.map` <sup>deprecated</sup>
50
+
### `router.map` <sup>replaced</sup>
51
51
52
52
Routes are now defined as an array on a [`routes` option](http://router.vuejs.org/en/essentials/getting-started.html#javascript) at router instantiation. So these routes for example:
53
53
@@ -82,7 +82,7 @@ The array syntax allows more predictable route matching, since iterating over an
82
82
</div>
83
83
{% endraw %}
84
84
85
-
### `router.on` <sup>deprecated</sup>
85
+
### `router.on` <sup>removed</sup>
86
86
87
87
If you need to programmatically generate routes when starting up your app, you can do so by dynamically pushing definitions to a routes array. For example:
88
88
@@ -128,7 +128,7 @@ router.match = createMatcher(
128
128
</div>
129
129
{% endraw %}
130
130
131
-
### `subRoutes` <sup>deprecated</sup>
131
+
### `subRoutes` <sup>renamed</sup>
132
132
133
133
[Renamed to `children`](http://router.vuejs.org/en/essentials/nested-routes.html) for consistency within Vue and with other routing libraries.
134
134
@@ -139,7 +139,7 @@ router.match = createMatcher(
139
139
</div>
140
140
{% endraw %}
141
141
142
-
### `router.redirect` <sup>deprecated</sup>
142
+
### `router.redirect` <sup>replaced</sup>
143
143
144
144
This is now an [option on route definitions](http://router.vuejs.org/en/essentials/redirect-and-alias.html). So for example, you will update:
145
145
@@ -165,7 +165,7 @@ to a definition like below in your `routes` configuration:
165
165
</div>
166
166
{% endraw %}
167
167
168
-
### `router.alias` <sup>deprecated</sup>
168
+
### `router.alias` <sup>replaced</sup>
169
169
170
170
This is now an [option on the definition for the route](http://router.vuejs.org/en/essentials/redirect-and-alias.html) you'd like to alias to. So for example, you will update:
Arbitrary route properties must now be scoped under the new meta property, to avoid conflicts with future features. So for example, if you had defined:
204
204
@@ -240,20 +240,20 @@ if (route.meta.requiresAuth) {
240
240
241
241
Route matching now uses [path-to-regexp](https://github.com/pillarjs/path-to-regexp) under the hood, making it much more flexible than previously.
242
242
243
-
### One or More Named Parameters
243
+
### One or More Named Parameters <sup>changed</sup>
244
244
245
245
The syntax has changed slightly, so `/category/*tags` for example, should be updated to `/category/:tags+`.
246
246
247
247
{% raw %}
248
248
<divclass="upgrade-path">
249
249
<h4>Upgrade Path</h4>
250
-
<p>Run the <ahref="https://github.com/vuejs/vue-migration-helper">migration helper</a> on your codebase to find examples of the deprecated route syntax.</p>
250
+
<p>Run the <ahref="https://github.com/vuejs/vue-migration-helper">migration helper</a> on your codebase to find examples of the obsolete route syntax.</p>
251
251
</div>
252
252
{% endraw %}
253
253
254
254
## Links
255
255
256
-
### `v-link` <sup>deprecated</sup>
256
+
### `v-link` <sup>replaced</sup>
257
257
258
258
The `v-link` directive has been replaced with a new [`<router-link>` component](http://router.vuejs.org/en/api/router-link.html), as this sort of job is now solely the responsibility of components in Vue 2. That means whenever wherever you have a link like this:
259
259
@@ -276,9 +276,9 @@ Note that `target="_blank"` is not supported on `<router-link>`, so if you need
276
276
</div>
277
277
{% endraw %}
278
278
279
-
### `v-link-active` <sup>deprecated</sup>
279
+
### `v-link-active` <sup>replaced</sup>
280
280
281
-
The `v-link-active` directive has also been deprecated in favor of specifying a separate tag on [the `<router-link>` component](http://router.vuejs.org/en/api/router-link.html). So for example, you'll update this:
281
+
The `v-link-active` directive has also been replaced by the `tag` attribute on [the `<router-link>` component](http://router.vuejs.org/en/api/router-link.html). So for example, you'll update this:
282
282
283
283
```html
284
284
<liv-link-active>
@@ -305,7 +305,7 @@ The `<a>` will be the actual link (and will get the correct href), but the activ
305
305
306
306
## Programmatic Navigation
307
307
308
-
### `router.go`
308
+
### `router.go` <sup>changed</sup>
309
309
310
310
For consistency with the [HTML5 History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API), `router.go` is now only used for [back/forward navigation](https://router.vuejs.org/en/essentials/navigation.html#routergon), while [`router.push`](http://router.vuejs.org/en/essentials/navigation.html#routerpushlocation) is used to navigate to a specific page.
311
311
@@ -318,7 +318,7 @@ For consistency with the [HTML5 History API](https://developer.mozilla.org/en-US
318
318
319
319
## Router Options: Modes
320
320
321
-
### `hashbang: false` <sup>deprecated</sup>
321
+
### `hashbang: false` <sup>removed</sup>
322
322
323
323
Hashbangs are no longer required for Google to crawl a URL, so they are no longer the default (or even an option) for the hash strategy.
324
324
@@ -329,7 +329,7 @@ Hashbangs are no longer required for Google to crawl a URL, so they are no longe
329
329
</div>
330
330
{% endraw %}
331
331
332
-
### `history: true` <sup>deprecated</sup>
332
+
### `history: true` <sup>replaced</sup>
333
333
334
334
All routing mode options have been condensed into a single [`mode` option](http://router.vuejs.org/en/api/options.html#mode). Update:
335
335
@@ -354,7 +354,7 @@ var router = new VueRouter({
354
354
</div>
355
355
{% endraw %}
356
356
357
-
### `abstract: true` <sup>deprecated</sup>
357
+
### `abstract: true` <sup>replaced</sup>
358
358
359
359
All routing mode options have been condensed into a single [`mode` option](http://router.vuejs.org/en/api/options.html#mode). Update:
360
360
@@ -381,7 +381,7 @@ var router = new VueRouter({
381
381
382
382
## Route Options: Misc
383
383
384
-
### `saveScrollPosition` <sup>deprecated</sup>
384
+
### `saveScrollPosition` <sup>replaced</sup>
385
385
386
386
This has been replaced with a [`scrollBehavior` option](http://router.vuejs.org/en/advanced/scroll-behavior.html) that accepts a function, so that the scroll behavior is completely customizable - even per route. This opens many new possibilities, but to simply replicate the old behavior of:
387
387
@@ -404,7 +404,7 @@ scrollBehavior: function (to, from, savedPosition) {
404
404
</div>
405
405
{% endraw %}
406
406
407
-
### `root` <sup>deprecated</sup>
407
+
### `root` <sup>renamed</sup>
408
408
409
409
Renamed to `base` for consistency with [the HTML `<base>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base).
410
410
@@ -415,7 +415,7 @@ Renamed to `base` for consistency with [the HTML `<base>` element](https://devel
415
415
</div>
416
416
{% endraw %}
417
417
418
-
### `transitionOnLoad` <sup>deprecated</sup>
418
+
### `transitionOnLoad` <sup>removed</sup>
419
419
420
420
This option is no longer necessary now that Vue's transition system has explicit [`appear` transition control](transitions.html#Transitions-on-Initial-Render).
421
421
@@ -426,7 +426,7 @@ This option is no longer necessary now that Vue's transition system has explicit
Removed due to hooks simplification. If you really must suppress transition errors, you can use [`try`...`catch`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch) instead.
432
432
@@ -439,7 +439,7 @@ Removed due to hooks simplification. If you really must suppress transition erro
439
439
440
440
## Route Hooks
441
441
442
-
### `activate` <sup>deprecated</sup>
442
+
### `activate` <sup>replaced</sup>
443
443
444
444
Use [`beforeRouteEnter`](http://router.vuejs.org/en/advanced/navigation-guards.html#incomponent-guards) in the component instead.
445
445
@@ -450,7 +450,7 @@ Use [`beforeRouteEnter`](http://router.vuejs.org/en/advanced/navigation-guards.h
450
450
</div>
451
451
{% endraw %}
452
452
453
-
### `canActivate` <sup>deprecated</sup>
453
+
### `canActivate` <sup>replaced</sup>
454
454
455
455
Use [`beforeEnter`](http://router.vuejs.org/en/advanced/navigation-guards.html#perroute-guard) in the route instead.
456
456
@@ -461,7 +461,7 @@ Use [`beforeEnter`](http://router.vuejs.org/en/advanced/navigation-guards.html#p
461
461
</div>
462
462
{% endraw %}
463
463
464
-
### `deactivate` <sup>deprecated</sup>
464
+
### `deactivate` <sup>removed</sup>
465
465
466
466
Use the component's [`beforeDestroy`](/api/#beforeDestroy) or [`destroyed`](/api/#destroyed) hooks instead.
467
467
@@ -472,7 +472,7 @@ Use the component's [`beforeDestroy`](/api/#beforeDestroy) or [`destroyed`](/api
472
472
</div>
473
473
{% endraw %}
474
474
475
-
### `canDeactivate` <sup>deprecated</sup>
475
+
### `canDeactivate` <sup>replaced</sup>
476
476
477
477
Use [`beforeRouteLeave`](http://router.vuejs.org/en/advanced/navigation-guards.html#incomponent-guards) in the component instead.
478
478
@@ -483,7 +483,7 @@ Use [`beforeRouteLeave`](http://router.vuejs.org/en/advanced/navigation-guards.h
483
483
</div>
484
484
{% endraw %}
485
485
486
-
### `canReuse: false` <sup>deprecated</sup>
486
+
### `canReuse: false` <sup>removed</sup>
487
487
488
488
There's no longer a use case for this in the new Vue Router.
489
489
@@ -494,9 +494,9 @@ There's no longer a use case for this in the new Vue Router.
494
494
</div>
495
495
{% endraw %}
496
496
497
-
### `data` <sup>deprecated</sup>
497
+
### `data` <sup>replaced</sup>
498
498
499
-
The `$route` property is reactive, so you can just use a watcher to react to route changes, like this:
499
+
The `$route` property is now reactive, so you can just use a watcher to react to route changes, like this:
500
500
501
501
```js
502
502
watch: {
@@ -516,7 +516,7 @@ methods: {
516
516
</div>
517
517
{% endraw %}
518
518
519
-
### `$loadingRouteData` <sup>deprecated</sup>
519
+
### `$loadingRouteData` <sup>removed</sup>
520
520
521
521
Define your own property (e.g. `isLoading`), then update the loading state in a watcher on the route. For example, if fetching data with [axios](https://github.com/mzabriskie/axios):
0 commit comments