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
