{"id":689,"date":"2019-08-08T06:51:11","date_gmt":"2019-08-08T10:51:11","guid":{"rendered":"http:\/\/salzlechner.com\/dev\/?p=689"},"modified":"2019-08-10T11:35:27","modified_gmt":"2019-08-10T15:35:27","slug":"using-vue-router-part-2-dynamic-routes","status":"publish","type":"post","link":"http:\/\/salzlechner.com\/dev\/2019\/08\/08\/using-vue-router-part-2-dynamic-routes\/","title":{"rendered":"Using Vue Router Part 2 – Dynamic Routes"},"content":{"rendered":"

[et_pb_section fb_built=”1″ _builder_version=”3.22″][et_pb_row _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text _builder_version=”3.0.74″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”]in our first part of this series we looked at simply using Vue router to switch pages<\/p>\n

Another important piece to the router puzzle is using dynamic routes with parameters<\/p>\n

for example we had a route as follows<\/p>\n

\/customers<\/p>\n

that would show the customers screen and probably show a list of customers in the system<\/p>\n

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

But we also need to somehow pass the id of the customer we want to show on that page<\/p>\n

Vue router allows dynamic routes and parameters which is exactly what we need for this.<\/p>\n

lets take a look at our new customer route<\/p>\n

    {\n      path: '\/customer\/:id',\n      name: 'customer',\n      component: Customer\n    },<\/pre>\n
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<\/p>\n
a proper url would look as follows<\/p>\n
\/customer\/1<\/pre>\n
we also need to add a few test links to our customers view<\/p>\n
<template>\n    <div>\n        <div>CUSTOMERS<\/div>\n\n        <router-link to=\"\/customer\/1\">\/customer\/1<\/router-link>  \n        <router-link to=\"\/customer\/2\">\/customer\/2<\/router-link>  \n    <\/div>\n<\/template><\/pre>\n
and of course create the customer view itself in customer.vue<\/p>\n
<template>\n    <div>CUSTOMER {{ $route.params.id }}  \n\n    <\/div>  \n<\/template><\/pre>\n
as you can see we use the router parameters to access the id of the customer to be shown<\/p>\n
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<\/p>\n
Parameter Changes<\/h2>\n
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. <\/p>\n
lets make a few changes to our customer component <\/p>\n
<script>\nexport default {\n    created() {\n        console.log(\"created\")\n        console.log(this.$route.params.id);\n    },\n  }\n\n}\n<\/script>\n<\/pre>\n
running our app now will show the log in the console every time we click on one of the customer links<\/p>\n
but now lets do the following. On our customer page lets add a link to switch to a different customer<\/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    <\/div>  \n<\/template><\/pre>\n
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<\/p>\n
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<\/p>\n
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.<\/p>\n
We can use a watcher to watch the route to react on changes of the route as follows<\/p>\n
    watch: {\n    '$route' (to, from) {\n      console.log(\"ROUTE CHANGE\");\n      console.log(to.params.id);\n    }<\/pre>\n
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<\/p>\n
In the next part of the router series we will look into nested routes.<\/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>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/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":"on","_et_pb_old_content":"in our first part of this series we looked at simply using Vue router to switch pages\n\nAnother important piece to the router puzzle is using dynamic routes with parameters\n\nfor example we had a route as follows\n\n\/customers\n\nthat would show the customers screen and probably show a list of customers in the system\n\nthe 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. \n\nBut we also need to somehow pass the id of the customer we want to show on that page\n\nVue router allows dynamic routes and parameters which is exactly what we need for this.\n\nlets take a look at our new customer route\n
    {\n      path: '\/customer\/:id',\n      name: 'customer',\n      component: Customer\n    },<\/pre>\nas 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\n\na proper url would look as follows\n
\/customer\/1<\/pre>\nwe also need to add a few test links to our customers view\n
<template>\n    <div>\n        <div>CUSTOMERS<\/div>\n\n        <router-link to=\"\/customer\/1\">\/customer\/1<\/router-link>  \n        <router-link to=\"\/customer\/2\">\/customer\/2<\/router-link>  \n    <\/div>\n<\/template><\/pre>\nand of course create the customer view itself in customer.vue\n
<template>\n    <div>CUSTOMER {{ $route.params.id }}  \n\n    <\/div>  \n<\/template><\/pre>\nas you can see we use the router parameters to access the id of the customer to be shown\n\nNow 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\n
Parameter Changes<\/h2>\none 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. \n\nlets make a few changes to our customer component \n
<script>\nexport default {\n    created() {\n        console.log(\"created\")\n        console.log(this.$route.params.id);\n    },\n  }\n\n}\n<\/script>\n<\/pre>\nrunning our app now will show the log in the console every time we click on one of the customer links\n\nbut now lets do the following. On our customer page lets add a link to switch to a different customer\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    <\/div>  \n<\/template><\/pre>\nnow 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\n\nThis 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\n\nbut 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.\n\nWe can use a watcher to watch the route to react on changes of the route as follows\n
    watch: {\n    '$route' (to, from) {\n      console.log(\"ROUTE CHANGE\");\n      console.log(to.params.id);\n    }<\/pre>\nrunning 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\n\nIn the next part of the router series we will look into nested routes.\n\n[author] [author_image timthumb='on']http:\/\/salzlechner.com\/dev\/wp-content\/uploads\/sites\/2\/2016\/02\/mike5crop.jpg[\/author_image] [author_info]Michael Salzlechner is the CEO of StarZen Technologies, Inc.\n\nHe 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\n\n[\/author_info] [\/author]","_et_gb_content_width":"","ngg_post_thumbnail":0,"footnotes":""},"categories":[38],"tags":[],"class_list":["post-689","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\/689","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=689"}],"version-history":[{"count":4,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/posts\/689\/revisions"}],"predecessor-version":[{"id":724,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/posts\/689\/revisions\/724"}],"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=689"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/categories?post=689"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/tags?post=689"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}