Skip to content

Commit 72986cb

Browse files
committed
chore: add blank lines readme [skip ci]
1 parent 214eb30 commit 72986cb

File tree

1 file changed

+21
-0
lines changed

1 file changed

+21
-0
lines changed

README.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,25 +29,32 @@
2929
- Catch all routes (`/*`) must now be defined using a parameter with a custom regex: `/:catchAll(.*)`
3030
- `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)
3131
- `router.getMatchedComponents` is now removed as they can be retrieved from `router.currentRoute.value.matched`:
32+
3233
```js
3334
router.currentRoute.value.matched.flatMap(record =>
3435
Object.values(record.components)
3536
)
3637
```
38+
3739
- The `append` argument has been removed. You can manually concatenate the value to an existing `path` instead.
40+
3841
- `RouterLink`
3942
- `append` prop has been removed as well. Use the same workaround as above.
4043
- `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).
4144
- `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).
4245
- `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).
4346
- If you use a `transition`, you may need to wait for the router to be _ready_ before mounting the app:
47+
4448
```js
4549
app.use(router)
4650
// Note: on Server Side, you need to manually push the initial ___location
4751
router.isReady().then(() => app.mount('#app'))
4852
```
53+
4954
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+
5056
- On SSR, you need to manually pass the appropriate history:
57+
5158
```js
5259
// router.js
5360
let history = isServer ? createMemoryHistory() : createWebHistory()
@@ -58,8 +65,10 @@
5865
// resolve the request
5966
})
6067
```
68+
6169
- 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).
6270
- `transition` and `keep-alive` must now be used **inside** of `RouterView` via the `v-slot` API:
71+
6372
```vue
6473
<router-view v-slot="{ Component }">
6574
<transition>
@@ -69,11 +78,15 @@
6978
</transition>
7079
</router-view>
7180
```
81+
7282
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+
7384
- `parent` is removed from Route locations (`this.$route` and object returned by `router.resolve`). You can still access it via the `matched` array:
85+
7486
```js
7587
const parent = this.$route.matched[this.$route.matched.length - 2]
7688
```
89+
7790
- `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.
7891

7992
### Typings
@@ -93,9 +106,11 @@ These are technically breaking changes but they fix an inconsistent behavior.
93106
- Pushing or resolving a non existent named route throws an error instead of navigating to `/` and displaying nothing.
94107
- _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.
95108
- Empty children `path` does not append a trailing slash (`/`) anymore to make it consistent across all routes:
109+
96110
- By default no route has a trailing slash but also works with a trailing slash
97111
- Adding `strict: true` to a route record or to the router options (alongside `routes`) will disallow an optional trailing slash
98112
- 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+
99114
```js
100115
let routes = [
101116
{
@@ -104,14 +119,18 @@ These are technically breaking changes but they fix an inconsistent behavior.
104119
},
105120
]
106121
```
122+
107123
- 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:
124+
108125
```js
109126
router.beforeEach((to, from, next) => {
110127
if (to.path.endsWith('/')) next()
111128
else next({ path: to.path + '/', query: to.query, hash: to.hash })
112129
})
113130
```
131+
114132
- Because of the change above, relative children path `redirect` on an empty path are not supported anymore. Use named routes instead:
133+
115134
```js
116135
// replace
117136
let routes = [
@@ -135,7 +154,9 @@ These are technically breaking changes but they fix an inconsistent behavior.
135154
},
136155
]
137156
```
157+
138158
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+
139160
- Encoding is now more consistent. The initial navigation should yield the same results are in-app navigations.
140161
- Values in `path`, `fullPath` are not decoded anymore. They will appear as provided by the browser (most browsers provide them encoded).
141162
- `params`, `query` and `hash` are now all decoded

0 commit comments

Comments
 (0)