{"id":696,"date":"2019-08-08T08:27:08","date_gmt":"2019-08-08T12:27:08","guid":{"rendered":"http:\/\/salzlechner.com\/dev\/?p=696"},"modified":"2019-08-10T11:34:40","modified_gmt":"2019-08-10T15:34:40","slug":"using-vue-router-part-3-nested-routes","status":"publish","type":"post","link":"http:\/\/salzlechner.com\/dev\/2019\/08\/08\/using-vue-router-part-3-nested-routes\/","title":{"rendered":"Using Vue Router Part 3 – Nested Routes"},"content":{"rendered":"

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.<\/p>\n

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. <\/p>\n

We could add all this functionality into the customer view but the Vue router can already provide that functionality using nested routes<\/p>\n

currently our routes are as follows<\/p>\n

HOME\nUSERS\nCUSTOMERS\nCUSTOMER\/ID\n\n<\/pre>\n
so the customers view shows all the customers and then navigates to the customer view passing the customers id<\/p>\n
what we would want is the following<\/p>\n
HOME\nCUSTOMERS\nCUSTOMER\/ID\n    PROFILE\n    ORDERS\n<\/pre>\n
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<\/p>\n
so lets define our profile and orders views<\/p>\n
customerprofile.vue<\/p>\n
<template>\n    <div>CUSTOMERPROFILE {{ $route.params.id }}  \n\n    <\/div>  \n<\/template>\n\n<script>\nexport default {\n\n}\n<\/script>\n<\/pre>\n
and also customerorders.vue<\/p>\n
<template>\n    <div>CUSTOMERORDERS {{ $route.params.id }}  \n\n    <\/div>  \n<\/template>\n\n<script>\nexport default {\n}\n<\/script>\n<\/pre>\n
now lets take a look at the routes<\/p>\n
{\n      path: '\/customer\/:id',\n      name: 'customer',\n      component: Customer,\n\n      children: [\n        {\n          path: 'profile',\n          component: CustomerProfile\n        },\n        {\n          path: 'orders',\n          component: CustomerOrders\n        }\n      ]\n    },<\/pre>\n
as you can see we added two children to our customer route. <\/p>\n
the first one for the profile view and the second for the orders view<\/p>\n
now lets try the route. in the browser enter the following url<\/p>\n
http:\/\/localhost:8080\/#\/customer\/2\/orders<\/pre>\n
hmm the customer view is shown for the proper customer but we do not see the orders view<\/p>\n
the reason for this is because the nested route would be displayed in a nested router view which we didnt create<\/p>\n
to do that we modify our customer view as follows<\/p>\n
<template>\n    <div>CUSTOMER {{ $route.params.id }}  \n\n        <router-link to=\"\/customer\/1\">\/customer\/1<\/router-link>\n        <router-link to=\"\/customer\/2\">\/customer\/2<\/router-link>\n\n        <router-link :to=\"`\/customer\/${$route.params.id}\/profile`\">Profile<\/router-link>\n        <router-link :to=\"`\/customer\/${$route.params.id}\/orders`\">Orders<\/router-link>\n\n        <p>Customer Router View<\/p>\n\n        <router-view\/>    \n    <\/div>  \n<\/template><\/pre>\n
we added a router view component to the customer view. We also added two router links to navigate to the profile and orders view<\/p>\n
now if we run the app we can navigate to the customer view and then switch between the profile and orders view<\/p>\n
bit what if we want the profile view to be the default view to show when navigating to the customer<\/p>\n
we can change the route for the profile view as in the following example<\/p>\n
    {\n      path: '\/customer\/:id',\n      name: 'customer',\n      component: Customer,\n\n      children: [\n        {\n          path: '',\n          component: CustomerProfile\n        },\n        {\n          path: 'orders',\n          component: CustomerOrders\n        }\n      ]\n    },<\/pre>\n
Now it will show the customer profile view as the default view whenever we navigate to a customer<\/p>\n\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\n\t\t\t
<\/div>\n\t\t<\/div> \n\t\t
\n\t\t\tMichael Salzlechner is the CEO of StarZen Technologies, Inc.<\/p>\n
He was part of the Windows Team at Data Access Worldwide that created the DataFlex for Windows Product before joining StarZen Technologies<\/a>. StarZen Technologies provides consulting services as well as custom Application development and third party products<\/p>\n\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":1,"featured_media":722,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","ngg_post_thumbnail":0,"footnotes":""},"categories":[38],"tags":[],"class_list":["post-696","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vue-js"],"_links":{"self":[{"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/posts\/696","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/comments?post=696"}],"version-history":[{"count":1,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/posts\/696\/revisions"}],"predecessor-version":[{"id":697,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/posts\/696\/revisions\/697"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/media\/722"}],"wp:attachment":[{"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/media?parent=696"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/categories?post=696"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/tags?post=696"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}