{"id":698,"date":"2019-08-08T09:36:45","date_gmt":"2019-08-08T13:36:45","guid":{"rendered":"http:\/\/salzlechner.com\/dev\/?p=698"},"modified":"2020-10-10T09:33:20","modified_gmt":"2020-10-10T13:33:20","slug":"using-vue-router-part-4-named-views","status":"publish","type":"post","link":"http:\/\/salzlechner.com\/dev\/2019\/08\/08\/using-vue-router-part-4-named-views\/","title":{"rendered":"Using Vue Router Part 4 – Named Views"},"content":{"rendered":"\n[et_pb_section][et_pb_row][et_pb_column type=”4_4″][et_pb_text]to show multiple different views on the same route, Vue router supports ‘named views’.\n\nnamed views allow us to create multiple named router views and then assign components to all views in the route.\n\nto show this we modify our main router view in App.vue as follows\n
<template>\n  <div id=\"app\">\n    <img src=\".\/assets\/logo.png\">\n\n\n    <router-link to=\"\/\">\/Home<\/router-link>  \n    <router-link to=\"\/users\">\/users<\/router-link>  \n    <router-link to=\"\/customers\">\/customers<\/router-link>  \n\n    <p>Main Router View<\/p>\n\n    <router-view\/>\n\n    <p>Secondary Router View<\/p>\n\n    <router-view name=\"secondary\"\/>\n  <\/div>\n<\/template><\/pre>\nin addition to our main router view we added a secondary router view that is aptly named secondary\n\nnow we also create a new component called CustomersSecondary.vue with the following content\n
<template>\n    <div>\n        <div>CUSTOMERS SECONDARY<\/div>\n\n    <\/div>\n<\/template>\n\n<script>\nexport default {\n    \n}\n<\/script><\/pre>\nand then we modify our customers route as follows\n
    {\n      path: '\/customers',\n      name: 'customers',\n      components: \n      {\n        default: Customers,\n        secondary: CustomersSecondary\n      }\n    },<\/pre>\ninstead of pointing the route to a single component we use the components attribute of the route to assign multiple components. The default component will be shown in the default router view and the component assigned to ‘secondary’ the name of our router view will be shown in the named router view\n\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.\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\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]\n","protected":false},"excerpt":{"rendered":"
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t<\/div>
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t<\/div>
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t<\/div>to show multiple different views on the same route, Vue router supports ‘named views’. named views allow us to create multiple named router views and then assign components to all views in the route. to show this we modify our main router view in App.vue as follows <template> <div id=”app”> <img src=”.\/assets\/logo.png”> <router-link to=”\/”>\/Home<\/router-link> <router-link […]<\/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":"to show multiple different views on the same route, Vue router supports 'named views'.\n\nnamed views allow us to create multiple named router views and then assign components to all views in the route.\n\nto show this we modify our main router view in App.vue as follows\n
<template>\n  <div id=\"app\">\n    <img src=\".\/assets\/logo.png\">\n\n\n    <router-link to=\"\/\">\/Home<\/router-link>  \n    <router-link to=\"\/users\">\/users<\/router-link>  \n    <router-link to=\"\/customers\">\/customers<\/router-link>  \n\n    <p>Main Router View<\/p>\n\n    <router-view\/>\n\n    <p>Secondary Router View<\/p>\n\n    <router-view name=\"secondary\"\/>\n  <\/div>\n<\/template><\/pre>\nin addition to our main router view we added a secondary router view that is aptly named secondary\n\nnow we also create a new component called CustomersSecondary.vue with the following content\n
<template>\n    <div>\n        <div>CUSTOMERS SECONDARY<\/div>\n\n    <\/div>\n<\/template>\n\n<script>\nexport default {\n    \n}\n<\/script><\/pre>\nand then we modify our customers route as follows\n
    {\n      path: '\/customers',\n      name: 'customers',\n      components: \n      {\n        default: Customers,\n        secondary: CustomersSecondary\n      }\n    },<\/pre>\ninstead of pointing the route to a single component we use the components attribute of the route to assign multiple components. The default component will be shown in the default router view and the component assigned to 'secondary' the name of our router view will be shown in the named router view\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]\n\n ","_et_gb_content_width":"","ngg_post_thumbnail":0,"footnotes":""},"categories":[38],"tags":[],"class_list":["post-698","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\/698","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=698"}],"version-history":[{"count":5,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/posts\/698\/revisions"}],"predecessor-version":[{"id":780,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/posts\/698\/revisions\/780"}],"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=698"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/categories?post=698"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/tags?post=698"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}