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 rerender the view! This can cause unexpected behavior because hooks don't fire and nested components don't reload. not mounted() How to Fix It The solution is to use another hook, . Let's take the example of the . The last parameter in the Playground's path is the code language, or . If the boilerplate code were only fetched using a hook, then when a user changed the path parameter the boilerplate code wouldn't reload. beforeRouteUpdate() Qvault Playground "js" "go" mounted() The reason that it reload is that the Qvault SPA also has the following hook: does beforeRouteUpdate() beforeRouteUpdate (to, , next) { .lang = to.params.lang; .setCode();
  next();
} from this this According to the , the hook receives three parameters: docs : the target being navigated to. 1. to Route Object : the current route being navigated away from. 2. from : this function must be called to the hook. The action depends on the arguments provided to next: 3. next resolve : move on to the next hook in the pipeline. If no hooks are left, the navigation is . next() confirmed : 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(false) : 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 or next('/') or next({ path: '/' }) router-link's to prop router.push : (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 . next(error) router.onError() In the case of the Qvault Playground, we are just doing the same operation that the hook does: we check the language and fetch the boiler plate. mounted() What If I Want All Routes To Update? If this is a common problem in your app, you can set your entire to re-render when its path changes by providing a key property: router-view < = /> router-view :key "$route.fullPath" With the above, you won't need to use the hook, and can directly access the now-reactive 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. beforeRouteUpdate() this.$route.params.myVar Thanks For Reading Follow us on Twitter if you have any questions or comments @q_vault Take game-like coding courses on Qvault Classroom to our Newsletter for more educational articles Subscribe Previously published at https://qvault.io/2020/07/07/how-to-rerender-a-vue-route-when-path-parameters-change/

Fetch

Target

Twitter

How to use Recursion to Traverse JSON Objects and the Filesystem

Constants in Go Vs. Constants in Javascript

Learn to code on Boot.dev

Nominated for 2022 - HackerNoon Contributor of the Year - Algorithms

Nominated for 2022 - HackerNoon Contributor of the Year - Mathematics

Nominated for 2022 - HackerNoon Contributor of the Year - Cryptography

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Github

Nominated for 2022 - HackerNoon Contributor of the Year - Online Education

Nominated for 2022 - HackerNoon Contributor of the Year - Job Hunting

Nominated for Super Career Strategist of 2022

Too Long; Didn't Read

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

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A Complete Overview of Cryptography

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

A Complete Overview of Cryptography

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps