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
<h2id="version-9x-browser-platform-support">Browser and Platform Support</h2>
25
26
@@ -251,3 +252,53 @@ The `IonRoute` component follows the same API changes as React Router's `<Route>
251
252
```
252
253
253
254
For more information on migrating from React Router v5 to v6, refer to the [React Router v6 Upgrade Guide](https://reactrouter.com/6.28.0/upgrading/v5).
255
+
256
+
<h4id="version-9x-vue">Vue</h4>
257
+
258
+
The `@ionic/vue-router` package now requires Vue Router v5. Vue Router v4 is no longer supported. Vue Router v5 also raises its peer requirement on Vue itself, so the minimum supported Vue version moves to `3.5.0`.
259
+
260
+
**Minimum Version Requirements**
261
+
| Package | Supported Version |
262
+
| ---------- | ----------------- |
263
+
| vue-router | 5.0.0+ |
264
+
| vue | 3.5.0+ |
265
+
266
+
**Migration**
267
+
268
+
Vue Router 5 is a transition release that ships no runtime breaking changes for Vue Router 4 consumers, so no application code changes are required for routes, navigation guards, or the `IonRouterOutlet`. Bump the dep ranges in your app's `package.json`:
269
+
270
+
```diff
271
+
"dependencies": {
272
+
- "vue": "^3.4.0",
273
+
- "vue-router": "^4.0.0"
274
+
+ "vue": "^3.5.0",
275
+
+ "vue-router": "^5.0.0"
276
+
}
277
+
```
278
+
279
+
**Deprecation Warning for `next()` in Navigation Guards**
280
+
281
+
Vue Router 5 prints a deprecation warning when `next()` is called inside `beforeRouteLeave`, `beforeRouteEnter`, `beforeRouteUpdate`, or `router.beforeEach`. The callback form still works, but Vue Router 6 will remove it. Migrate to the return-value pattern:
282
+
283
+
```diff
284
+
// Composition API
285
+
onBeforeRouteLeave((to, from) => {
286
+
- if (!confirm('Leave?')) return next(false);
287
+
- next();
288
+
+ if (!confirm('Leave?')) return false;
289
+
+ return true;
290
+
});
291
+
```
292
+
293
+
```diff
294
+
// Options API
295
+
beforeRouteLeave(to, from, next) {
296
+
- if (!confirm('Leave?')) return next(false);
297
+
- next();
298
+
+ beforeRouteLeave(to, from) {
299
+
+ if (!confirm('Leave?')) return false;
300
+
+ return true;
301
+
}
302
+
```
303
+
304
+
For more information on Vue Router 5, refer to the [Vue Router v4-to-v5 migration guide](https://router.vuejs.org/guide/migration/v4-to-v5.html).
0 commit comments