Understanding Changes in Vue Router v3

The latest version of Vue Router, v3, has introduced several changes that developers should be aware of when upgrading their projects. In this article, we'll dive into the key updates and what they mean for your application.

One significant change is the way navigation guards work in mixins. Currently, navigation guards in mixins are not supported due to an open issue on the Vue Router GitHub page (vue-router#454). This means that you won't be able to use navigation guards in mixin-based routes until this issue is resolved.

Another important update is the new behavior of route matching. In v3, only the path section is matched, and query and hash parameters are no longer taken into account. This change affects how you write routes and how they're activated. To customize this behavior, you'll need to use the `v-slot` API and extend the routing behavior.

There are a few things to keep in mind when upgrading to v3:

* The exact prop has been removed, as it was no longer necessary due to changes in the route matching algorithm.

* When accessing the current route object on the router instance, you'll need to use `currentRoute.value` instead of directly accessing its properties.

Additionally, the type of the `currentRoute` object on the router instance has changed from a plain object to a `Ref`. This change was introduced in Vue 3 and affects how you access the current route's properties.

Another update is the encoding of parameters across routes. In v3, all parameters are encoded uniformly, without exceptions. This makes it easier to predict how parameters will be handled in different routes.

Finally, the way Vue Router handles repeated params has changed. You no longer need to use a special syntax (e.g., `*`) for repeated params if you don't plan to directly push to the not found route using its name.

Overall, these changes aim to make routing more predictable and efficient in Vue Router v3. While there may be some breaking changes, they're necessary steps towards improving the framework's performance and usability. By understanding these updates, you'll be better equipped to take advantage of the new features and improvements in Vue Router v3.

Vue router vue3