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: README.md
+21Lines changed: 21 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -29,25 +29,32 @@
29
29
- Catch all routes (`/*`) must now be defined using a parameter with a custom regex: `/:catchAll(.*)`
30
30
-`router.match` and `router.resolve` are merged together into `router.resolve` with a slightly different signature. Check its typing through autocomplete or [Router's `resolve` method](https://github.com/vuejs/vue-router-next/blob/master/src/router.ts)
31
31
-`router.getMatchedComponents` is now removed as they can be retrieved from `router.currentRoute.value.matched`:
- The `append` argument has been removed. You can manually concatenate the value to an existing `path` instead.
40
+
38
41
-`RouterLink`
39
42
-`append` prop has been removed as well. Use the same workaround as above.
40
43
-`event` prop has been removed. Use the `v-slot` API instead. See [RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0021-router-link-scoped-slot.md).
41
44
-`tag` prop has been removed. Use the `v-slot` API instead. See [RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0021-router-link-scoped-slot.md).
42
45
-`exact` prop has been removed. The caveat it was fixing is no longer present. See [RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0028-router-active-link.md).
43
46
- If you use a `transition`, you may need to wait for the router to be _ready_ before mounting the app:
47
+
44
48
```js
45
49
app.use(router)
46
50
// Note: on Server Side, you need to manually push the initial ___location
47
51
router.isReady().then(() =>app.mount('#app'))
48
52
```
53
+
49
54
Otherwise there will be an initial transition as if you provided the `appear` prop to `transition` because the router displays its initial ___location (nothing) and then displays the first ___location. This happens because navigations are all asynchronous now. **If you have navigation guards upon the initial navigation**, you might not want to block the app render until they are resolved.
55
+
50
56
- On SSR, you need to manually pass the appropriate history:
57
+
51
58
```js
52
59
// router.js
53
60
let history = isServer ?createMemoryHistory() :createWebHistory()
@@ -58,8 +65,10 @@
58
65
// resolve the request
59
66
})
60
67
```
68
+
61
69
- The object returned in `scrollBehavior` is now similar to [`ScrollToOptions`](https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions): `x` is renamed to `left` and `y` is renamed to `top`. See [RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0035-router-scroll-position.md).
62
70
-`transition` and `keep-alive` must now be used **inside** of `RouterView` via the `v-slot` API:
71
+
63
72
```vue
64
73
<router-view v-slot="{ Component }">
65
74
<transition>
@@ -69,11 +78,15 @@
69
78
</transition>
70
79
</router-view>
71
80
```
81
+
72
82
See more on the [KeepAlive](https://github.com/vuejs/vue-router-next/blob/master/e2e/keep-alive/index.ts) and the [Transition](https://github.com/vuejs/vue-router-next/blob/master/e2e/transitions/index.ts) examples. See [RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0034-router-view-keep-alive-transitions.md).
83
+
73
84
-`parent` is removed from Route locations (`this.$route` and object returned by `router.resolve`). You can still access it via the `matched` array:
-`pathToRegexpOptions` and `caseSensitive` have been replaced with `sensitive` and `strict` options. They can also be directly passed when creating the router with `createRouter()`. Any other option has been removed as `path-to-regexp` is no longer used to parse paths.
78
91
79
92
### Typings
@@ -93,9 +106,11 @@ These are technically breaking changes but they fix an inconsistent behavior.
93
106
- Pushing or resolving a non existent named route throws an error instead of navigating to `/` and displaying nothing.
94
107
-_resolving_(`router.resolve`) or _pushing_ (`router.push`) a ___location with missing params no longer warns and produces an invalid URL (`/`), but explicitly throws an Error instead.
95
108
- Empty children `path` does not append a trailing slash (`/`) anymore to make it consistent across all routes:
109
+
96
110
- By default no route has a trailing slash but also works with a trailing slash
97
111
- Adding `strict: true` to a route record or to the router options (alongside `routes`) will disallow an optional trailing slash
98
112
- Combining `strict: true` with a trailing slash in your routes allows you to enforce a trailing slash in your routes. In the case of nested routes, make sure to add the trailing slash to the parent **and not the empty child**:
113
+
99
114
```js
100
115
let routes = [
101
116
{
@@ -104,14 +119,18 @@ These are technically breaking changes but they fix an inconsistent behavior.
104
119
},
105
120
]
106
121
```
122
+
107
123
- To redirect the user to trailing slash routes (or the opposite), you can setup a `beforeEach` navigation guard that ensures the presence of a trailing slash:
- Because of the change above, relative children path `redirect` on an empty path are not supported anymore. Use named routes instead:
133
+
115
134
```js
116
135
// replace
117
136
let routes = [
@@ -135,7 +154,9 @@ These are technically breaking changes but they fix an inconsistent behavior.
135
154
},
136
155
]
137
156
```
157
+
138
158
Note this will work if`path` was `/parent/` as the relative ___location `home` to `/parent/` is indeed `/parent/home` but the relative ___location of`home` to `/parent` is `/home`
159
+
139
160
- Encoding is now more consistent. The initial navigation should yield the same results are in-app navigations.
140
161
- Values in`path`, `fullPath` are not decoded anymore. They will appear as provided by the browser (most browsers provide them encoded).
0 commit comments