Vue.js 2 Design Patterns and Best Practices

beforeRouteUpdate

Let's use the beforeRouteUpdate method to access information about the route change:

const HelloName = {  props: ['name'],  template: `<h1>Hello {{ name }}</h1>`,  beforeRouteUpdate(to, from, next) {    console.log(to);    console.log(from);    console.log(`Hello ${to.params.name}`)  },}

If we check the JavaScript console after navigating to a different route under /hello/{name}, we'll be able to see which route the user is going to and where they are coming from. The to and from objects also give us access to params, queries, the full path, and much more.

While we correctly get the log statements, if we try and navigate between routes, you'll note that our application doesn't update with the parameter name prop. This is because we haven't ...