How to Rerender a Vue Route When Path Parameters Change
Tags: javascript, programming, tutorial, vue
Published: 2020-07-07 13:14:27

---
title: How to Rerender a Vue Route When Path Parameters Change
published: true
date: 2020-07-07 13:13:21 UTC
tags: JavaScript,Programming,Tutorial,Vue
canonical_url: https://qvault.io/2020/07/07/how-to-rerender-a-vue-route-when-path-parameters-change/
---

 ![Paint over and rerender the wall](https://qvault.io/wp-content/uploads/2020/07/paint-over-dark-628x354-1-300x169.jpg)

The post [How to Rerender a Vue Route When Path Parameters Change](https://qvault.io/2020/07/07/how-to-rerender-a-vue-route-when-path-parameters-change/) appeared first on [Qvault](https://qvault.io).

In single-page apps that use the [Vue Router](https://router.vuejs.org/), 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()](https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards). Let’s take the example of the [Qvault Playground](https://classroom.qvault.io/#/playground/go). 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:

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

According to the [docs](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards), the hook receives three parameters:

- **`to`** : the target [Route Object](https://router.vuejs.org/api/#the-route-object) being navigated to.
- **`from`** : the current route being navigated away from.
- **`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](https://router.vuejs.org/api/#to) or [`router.push`](https://router.vuejs.org/api/#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()`](https://router.vuejs.org/api/#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.

## Thanks For Reading

Follow us on Twitter [@q\_vault](https://twitter.com/q_vault) if you have any questions or comments

Take game-like coding courses on [Qvault Classroom](https://classroom.qvault.io/#/)

[Subscribe](https://mailchi.mp/5c7f5c281bbe/qvault-newsletter-subscribe)to our Newsletter for more educational articles

The post [How to Rerender a Vue Route When Path Parameters Change](https://qvault.io/2020/07/07/how-to-rerender-a-vue-route-when-path-parameters-change/) appeared first on [Qvault](https://qvault.io).