Skip to content

Commit 3debfe8

Browse files
committed
chore: alternative in changelog [skip ci]
1 parent 4cc3093 commit 3debfe8

File tree

1 file changed

+30
-6
lines changed

1 file changed

+30
-6
lines changed

packages/router/CHANGELOG.md

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,38 @@ part of the `path`, eg: having a route defined as follows:
1717
And pushing with an _artificial_ param:
1818

1919
```js
20-
router.push({ name: 'somewhere', params: { oops: 'gets removed' }})
20+
router.push({ name: 'somewhere', params: { oops: 'gets removed' } })
2121
```
2222

23-
This change will break your app. This behavior has worked in some
24-
scenarios but has been **advised against** for years as it's an
25-
anti-pattern in routing. You can still put the data in `query` or as an
26-
actual param. Fixing #1497, required getting rid of unused params which
27-
and therefore will break this anti-pattern usage.
23+
This change will break your app. This behavior has worked in some scenarios but has been **advised against** for years as it's an anti-pattern in routing for many reasons, one of them being reloading the page lose the params. Fortunately, there are multiple alternatives to this anti-pattern:
24+
25+
- Putting the data in a store like [pinia](https://pinia.vuejs.org): this is relevant if the data is used across multiple pages
26+
- Move the data to an actual _param_ by defining it on the route's `path` or pass it as `query` params: this is relevant if you have small pieces of data that can fit in the URL and should be preserved when reloading the page
27+
- Pass the data as [`state` to save it to the History API state](https://router.vuejs.org/api/interfaces/routelocationoptions.html#state):
28+
29+
```vue
30+
<router-link :to="{ name: 'somewhere', state: { myData } }">...</router-link>
31+
<button
32+
@click="$router.push({ name: 'somewhere', state: { myData } })"
33+
>...</button>
34+
```
35+
36+
Note you are subject to [History state limitations](https://developer.mozilla.org/en-US/docs/Web/API/History/state).
37+
38+
- Pass it as a new property to `to.meta` **during navigation guards**:
39+
40+
```ts
41+
router.beforeEach(async to => {
42+
if (to.meta.shouldFetch) {
43+
// name `data` whatever you want
44+
to.meta.data = await fetchSomething()
45+
}
46+
})
47+
```
48+
49+
This is known an _transient state_ and since it's in a navigation guard, it will be preserved when reloading the page. [Check the documentation for more details](https://router.vuejs.org/guide/advanced/meta.html#typescript).
50+
51+
Fixing #1497, required getting rid of unused params and therefore will broke this long standing anti-pattern usage.
2852

2953
### Bug Fixes
3054

0 commit comments

Comments
 (0)