{"id":684,"date":"2019-08-08T05:58:17","date_gmt":"2019-08-08T09:58:17","guid":{"rendered":"http:\/\/salzlechner.com\/dev\/?p=684"},"modified":"2019-08-10T11:37:18","modified_gmt":"2019-08-10T15:37:18","slug":"using-vue-router","status":"publish","type":"post","link":"http:\/\/salzlechner.com\/dev\/2019\/08\/08\/using-vue-router\/","title":{"rendered":"Using Vue Router &#8211; Part 1"},"content":{"rendered":"<p>In this post we will take a look at using Vue Router<\/p>\n<p>first we will create a new vue app usign webpack<\/p>\n<pre class=\"lang:default decode:true \">vue init webpack vuerouter\n<\/pre>\n<p>after the project is created, navigate to the folder and run&nbsp;<\/p>\n<pre class=\"lang:default decode:true \">npm run dev\n<\/pre>\n<p>first we will create a simple main screen with 3 different routes<\/p>\n<ul>\n<li>Dashboard Page<\/li>\n<li>Customers Page<\/li>\n<li>Users Page<\/li>\n<\/ul>\n<p>lets modify the sample code as follows<\/p>\n<p>in App.vue we will add three router links to our three views&nbsp;<\/p>\n<pre class=\"lang:default decode:true\">&lt;template&gt;\n  &lt;div id=\"app\"&gt;\n    &lt;img src=\".\/assets\/logo.png\"&gt;\n\n    &lt;router-link to=\"\/\"&gt;\/Home&lt;\/router-link&gt;  \n    &lt;router-link to=\"\/users\"&gt;\/users&lt;\/router-link&gt;  \n    &lt;router-link to=\"\/customers\"&gt;\/customers&lt;\/router-link&gt;  \n\n    &lt;p&gt;Main Router View&lt;\/p&gt;\n\n    &lt;router-view\/&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;<\/pre>\n<p>we also need to create the 3 components of course<\/p>\n<p>dahsboard.vue<\/p>\n<pre class=\"lang:default decode:true \">&lt;template&gt;\n    &lt;div&gt;DASHBOARD&lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\nexport default {\n    \n}\n&lt;\/script&gt;\n\n<\/pre>\n<p>and then create customers.vue and users.vue the same just chaneg the text in the template<\/p>\n<p>now lets define our routes<\/p>\n<p>\/router\/index.js<\/p>\n<pre class=\"lang:default decode:true \">import Vue from 'vue'\nimport Router from 'vue-router'\nimport DashBoard from '@\/components\/DashBoard'\nimport Users from '@\/components\/users'\nimport Customers from '@\/components\/customers'\n\nVue.use(Router)\n\nexport default new Router({\n  routes: [\n    {\n      path: '\/',\n      name: 'dashboard',\n      component: DashBoard\n    },\n    {\n      path: '\/users',\n      name: 'users',\n      component: Users\n    },\n    {\n      path: '\/customers',\n      name: 'customers',\n      component: Customers\n    }\n  ]\n})\n<\/pre>\n<p>running this app will show as a main page showing the Dashboard page by default<\/p>\n<p>it will also have the 3 links at the top and when clicking one of the links will navigate to the route and show the page in the main router view<\/p>\n<p>in the next part of the router series we will take a look at dynamic routes<\/p>\n\n\t\t<div class='author-shortcodes'>\n\t\t\t<div class='author-inner'>\n\t\t\t\t<div class='author-image'>\n\t\t\t<img src='http:\/\/salzlechner.com\/dev\/wp-content\/uploads\/sites\/2\/2016\/02\/mike5crop-566174_60x60.jpg' alt='' \/>\n\t\t\t<div class='author-overlay'><\/div>\n\t\t<\/div> \n\t\t<div class='author-info'>\n\t\t\tMichael Salzlechner is the CEO of StarZen Technologies, Inc.<\/p>\n<p>He was part of the Windows Team at Data Access Worldwide that created the DataFlex for Windows Product before joining&nbsp;<a href=\"http:\/\/starzen.com\">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":"<p>In this post we will take a look at using Vue Router first we will create a new vue app usign webpack vue init webpack vuerouter after the project is created, navigate to the folder and run&nbsp; npm run dev first we will create a simple main screen with 3 different routes Dashboard Page Customers [&hellip;]<\/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-684","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\/684","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=684"}],"version-history":[{"count":5,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/posts\/684\/revisions"}],"predecessor-version":[{"id":783,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/posts\/684\/revisions\/783"}],"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=684"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/categories?post=684"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/tags?post=684"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}