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:
Spring Boot + Vue.js example | Spring Data JPA + REST + PostgreSQL CRUD
Spring Boot + Vue.js example | Spring Data JPA + REST + MySQL CRUD

Vue Router example Overview



We can:
– click on Nav Bar button to change view among Pages.
– click on any Customer to show details.


Vue Router

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

Add Vue Router to Project

– Run command: npm install vue-router.
– Import router to main.js:

Vue Router with Nav Bar

– Define some routes, each route has a path and maps to a component:


– We use router-link component for navigation and specify the link with ‘to’ prop. By default, <router-link> will be rendered as an <a> tag.
router-view is the router outlet that render the matched component.

Vue Router with Dynamic Route

For mapping routes with the given pattern to the same component:
With path: "/customer/:id", urls like /customer/1 and /customer/42 will both map to the same route:

When a route is matched, the value of the dynamic segments will be exposed as this.$route.params in every component. Therefore, we can render the current id with this.$

Vue Router with Nested Routes

To render components into another one, we need to use the children option in Vue Router constructor config:

Then add the child component inside the parent component’s template:

We use Named Route name: 'customer-details' to make link to component, and we can also pass an object ({name, id}) to the router-link component:

Project Structure


We have:
– Components: CustomersList, AddCustomer, SearchCustomers are corresponding to 3 Navbar buttons: Customers, Add, Search.
Customer components is the child of CustomersList component, its UI view is embeded into parent component using <router-view> tag.
App.vue contains the whole application template with Nav bar and <router-view>.
– We define routes, each route has a path and maps to a component in router.js.
main.js mount App component with router to be injected.



– Vue CLI 3.0.1
– Vue 2.5.17
– Vue Router 3.0.1

Setup Vue Project
Install vue-cli

For use Vue CLI anywhere, run command:
npm install -g vue-cli

Init Project

Point cmd to the folder you want to save Project folder, run command:
npm create vue-router-example

You will see 2 options, choose default:


Add Vue Router to Project

– Run command: npm install vue-router.
– Import router to main.js:

Define Routes


App template with Navbar and router-view


Mock Components



Components with Dynamic Route & Nested Routes
Parent Component


Child Component


Source Code


By grokonez | September 10, 2018.

Related Posts

Got Something To Say:

Your email address will not be published. Required fields are marked *