in our first part of this series we looked at simply using Vue router to switch pages

Another important piece to the router puzzle is using dynamic routes with parameters

for example we had a route as follows

/customers

that would show the customers screen and probably show a list of customers in the system

the next step would be to show a specific customer so we need a view to show the customer and then define the route to that page. 

But we also need to somehow pass the id of the customer we want to show on that page

Vue router allows dynamic routes and parameters which is exactly what we need for this.

lets take a look at our new customer route

    {
      path: '/customer/:id',
      name: 'customer',
      component: Customer
    },

as you can see we define a new route for the customer page but in the path definition we define a dynamic path that contains the id of the customer

a proper url would look as follows

/customer/1

we also need to add a few test links to our customers view

<template>
    <div>
        <div>CUSTOMERS</div>

        <router-link to="/customer/1">/customer/1</router-link>  
        <router-link to="/customer/2">/customer/2</router-link>  
    </div>
</template>

and of course create the customer view itself in customer.vue

<template>
    <div>CUSTOMER {{ $route.params.id }}  

    </div>  
</template>

as you can see we use the router parameters to access the id of the customer to be shown

Now when we run the app we can navigate to the customers view and then click on any of the customer routes to navigate to each of the cstomers

Parameter Changes

one thing to watch out for is the change of the parameter. In our current example the view is created every time a link is clicked and all the life cycle hooks such as created are being called. 

lets make a few changes to our customer component 

<script>
export default {
    created() {
        console.log("created")
        console.log(this.$route.params.id);
    },
  }

}
</script>

running our app now will show the log in the console every time we click on one of the customer links

but now lets do the following. On our customer page lets add a link to switch to a different customer

<template>
    <div>CUSTOMER {{ $route.params.id }}  

    <router-link to="/customer/1">/customer/1</router-link>
    <router-link to="/customer/2">/customer/2</router-link>
    </div>  
</template>

now lets run it again. When clicking the customer links on the main customers view the life cycle hooks are being called but not when using the links on the customer page

This is because Vue optimizes the routes and realizes it is already on the proper component so there is no need to destroy and recreate the component

but that also means we have to be careful as the data we are supposed to show changes but the life cycle hooks are not called.

We can use a watcher to watch the route to react on changes of the route as follows

    watch: {
    '$route' (to, from) {
      console.log("ROUTE CHANGE");
      console.log(to.params.id);
    }

running the app now will call the life cycle hooks whenever the component is created and the watcher when the parameter changes and the component is already created

In the next part of the router series we will look into nested routes.

Michael Salzlechner is the CEO of StarZen Technologies, Inc.

He was part of the Windows Team at Data Access Worldwide that created the DataFlex for Windows Product before joining StarZen Technologies. StarZen Technologies provides consulting services as well as custom Application development and third party products