808 reads

An Essential Guide to Re-rendering Vue Routes When Path Parameters Change

by Lane WagnerSeptember 4th, 2020

Too Long; Didn't Read

A common problem occurs when a user alters the path in the address bar manually. Manually changing the path does not rerender the view. This can cause unexpected behavior because mounted() hooks don't fire and nested components don't reload. The solution is to use another hook, beforeRouteUpdate(). The last parameter in the Qvault Playground's path is the code language, "js" or "go". If the boilerplate code were only fetched using a mounted() hook, then the code would not reload. You can set your entire router-view to re-render when its path changes.

Companies Mentioned

featured image - An Essential Guide to Re-rendering Vue Routes When Path Parameters Change

In single-page apps that use the Vue Router, it is common to create a path parameter that changes the behavior of a route. A common problem occurs when a user alters the path manually in the address bar. Manually changing the URL does not rerender the view! This can cause unexpected behavior because mounted() hooks don't fire and nested components don't reload.

How to Fix It

The solution is to use another hook, beforeRouteUpdate(). Let's take the example of the Qvault Playground. The last parameter in the Playground's path is the code language, "js" or "go". If the boilerplate code were only fetched using a mounted() hook, then when a user changed the path parameter the boilerplate code wouldn't reload.

The reason that it does reload is that the Qvault SPA also has the following beforeRouteUpdate() hook:

beforeRouteUpdate (to, from, next) {
  this.lang = to.params.lang;
  this.setCode();
  next();
}

According to the docs, the hook receives three parameters:

1. to: the target Route Object being navigated to.

2. from: the current route being navigated away from.

3. next: this function must be called to resolve the hook. The action depends on the arguments provided to next:

next(): move on to the next hook in the pipeline. If no hooks are left, the navigation is confirmed.
next(false): abort the current navigation. If the browser URL was changed (either manually by the user or via back button), it will be reset to that of the from route.
next('/') or next({ path: '/' }): redirect to a different location. The current navigation will be aborted and a new one will be started. You can pass any location object to next, which allows you to specify options like replace: true, name: 'home' and any option used in router-link's to prop or router.push
next(error): (2.4.0+) if the argument passed to next is an instance of Error, the navigation will be aborted and the error will be passed to callbacks registered via router.onError().

In the case of the Qvault Playground, we are just doing the same operation that the mounted() hook does: we check the language and fetch the boiler plate.

What If I Want All Routes To Update?

If this is a common problem in your app, you can set your entire router-view to re-render when its path changes by providing a key property:

<router-view :key="$route.fullPath" />

With the above, you won't need to use the beforeRouteUpdate() hook, and can directly access the now-reactive this.$route.params.myVar property. The only problem with this method is that every path in that router will update in the case of a path change. You may not want all that needless re-rendering, but that's a decision for you to make.