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
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):
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(asyncto=> {
42
+
if (to.meta.shouldFetch) {
43
+
// name `data` whatever you want
44
+
to.meta.data=awaitfetchSomething()
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.
0 commit comments