Vue Router example - with Nav Bar, Dynamic Route & Nested Routes
Tags: vue, router
Published: 2021-04-03 12:28:16

https://grokonez.com/frontend/vue-js/vue-router-example-with-nav-bar-dynamic-route-nested-routes

Vue Router example - with Nav Bar, Dynamic Route & Nested Routes

Vue Router deeply integrates with Vue.js that we can use to build single-page Vue Application in simple way. In this tutorial, we're gonna look at a Vue Router example that allows us to navigate among tabs and dynamically show item details from a item list with Nav bar, Dynamic Route and Nested Routes.

More Practice:
- <a href="https://grokonez.com/spring-framework/spring-boot/spring-boot-vue-example-spring-data-jpa-rest-postgresql-crud-example">Spring Boot + Vue.js example | Spring Data JPA + REST + PostgreSQL CRUD</a>
- <a href="https://grokonez.com/spring-framework/spring-boot/spring-boot-vue-js-example-spring-data-jpa-rest-mysql-crud">Spring Boot + Vue.js example | Spring Data JPA + REST + MySQL CRUD</a>

<!--more-->
<h2>Vue Router example Overview</h2>
<h3>Goal</h3>
<img src="https://grokonez.com/wp-content/uploads/2018/09/vue-router-example-nav-bar-dynamic-route-nested-routes-result.png" alt="vue-router-example-nav-bar-dynamic-route-nested-routes-result" width="504" height="300" class="alignnone size-full wp-image-14656" />

We can:
- click on Nav Bar button to change view among Pages.
- click on any Customer to show details.
<h3>Demo</h3>
<iframe width="853" height="480" src="https://www.youtube.com/embed/jgH_pDwle7A?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<h2>Vue Router</h2>
When adding Vue Router to Vue App, we have 2 core actions:
- map components to the routes
- let Vue Router know where to render them
<h3>Add Vue Router to Project</h3>
- Run command: <code>npm install vue-router</code>.
- Import <code>router</code> to <strong>main.js</strong>:
<pre><code class="language-javascript">
import Vue from "vue";
import App from "./App.vue";
import router from './router'

Vue.config.productionTip = false;

new Vue({
  router, // inject the router to make whole app router-aware
  render: h => h(App)
}).$mount("#app");
</code></pre>
<h3>Vue Router with Nav Bar</h3>
- Define some routes, each route has a <code>path</code> and maps to a <code>component</code>:
<em>src/router.js</em>
<pre><code class="language-javascript">
import Vue from "vue";
import Router from "vue-router";
import CustomersList from "./components/CustomersList.vue";
import AddCustomer from "./components/AddCustomer.vue";
import SearchCustomers from "./components/SearchCustomers.vue";

Vue.use(Router);

export default new Router({
  // get rid of the hash (#) in Url
  // the hash (#) helps the page not to be reloaded when the URL changes
  mode: "history",
  routes: [
    {
      path: "/",
      name: "customers",
      alias: "/customer", // go '/', the URL remains '/', but it wcill be matched if visiting '/customer'
      component: CustomersList
    },
    {
      path: "/add",
      name: "add",
      component: AddCustomer
    },
    {
      path: "/search",
      name: "search",
      component: SearchCustomers
    }
  ]
});
</code></pre>
<em>src/App.vue</em>
<pre><code class="language-html">&lt;template&gt;
    &lt;div id=&quot;app&quot;&gt;
        &lt;nav&gt;
            &lt;router-link to=&quot;/&quot;&gt;Customers&lt;/router-link&gt;
            &lt;router-link to=&quot;/add&quot;&gt;Add&lt;/router-link&gt;
            &lt;router-link to=&quot;/search&quot;&gt;Search&lt;/router-link&gt;
        &lt;/nav&gt;
        &lt;router-view/&gt;
    &lt;/div&gt;
&lt;/template&gt;</code></pre>
- We use <code>router-link</code> component for navigation and specify the link with 'to' prop. By default, <code>&#60;router-link&#62;</code> will be rendered as an <code>&#60;a&#62;</code> tag.
- <code>router-view</code> is the router outlet that render the matched component.

More: https://grokonez.com/frontend/vue-js/vue-router-example-with-nav-bar-dynamic-route-nested-routes