In the first two parts of this series we have created simple routes and also created dynamic routes with parameters so we can open a view such as customer with a parameter to show a specific customer.

But what if the customer view consists out of multiple views for example a profile page showing the customers name, address, etc and then other pages to show for example the customers orders. 

We could add all this functionality into the customer view but the Vue router can already provide that functionality using nested routes

currently our routes are as follows

HOME
USERS
CUSTOMERS
CUSTOMER/ID

so the customers view shows all the customers and then navigates to the customer view passing the customers id

what we would want is the following

HOME
CUSTOMERS
CUSTOMER/ID
    PROFILE
    ORDERS

so when navigating to the customer view we want to show the profile view as a default and also be able to navigate to the orders view for that customer

so lets define our profile and orders views

customerprofile.vue

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

    </div>  
</template>

<script>
export default {

}
</script>

and also customerorders.vue

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

    </div>  
</template>

<script>
export default {
}
</script>

now lets take a look at the routes

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

      children: [
        {
          path: 'profile',
          component: CustomerProfile
        },
        {
          path: 'orders',
          component: CustomerOrders
        }
      ]
    },

as you can see we added two children to our customer route. 

the first one for the profile view and the second for the orders view

now lets try the route. in the browser enter the following url

http://localhost:8080/#/customer/2/orders

hmm the customer view is shown for the proper customer but we do not see the orders view

the reason for this is because the nested route would be displayed in a nested router view which we didnt create

to do that we modify our customer view as follows

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

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

        <router-link :to="`/customer/${$route.params.id}/profile`">Profile</router-link>
        <router-link :to="`/customer/${$route.params.id}/orders`">Orders</router-link>

        <p>Customer Router View</p>

        <router-view/>    
    </div>  
</template>

we added a router view component to the customer view. We also added two router links to navigate to the profile and orders view

now if we run the app we can navigate to the customer view and then switch between the profile and orders view

bit what if we want the profile view to be the default view to show when navigating to the customer

we can change the route for the profile view as in the following example

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

      children: [
        {
          path: '',
          component: CustomerProfile
        },
        {
          path: 'orders',
          component: CustomerOrders
        }
      ]
    },

Now it will show the customer profile view as the default view whenever we navigate to a customer

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