Steps to create routes in vue application using vue-router

In my previous stories I have explained how to create an express server and a starter kit for a vue app with many adorable features. In this article let’s see how easy it is to integrate and use vue-router.

Check this GitHub project for example

Prerequisites

1. Starter kit with VueJS, VueX, Router, Webpack, Vue-bootstrap and ExpressJS

Let’s Begin !!

I assume we are ready with our prerequisite stated above (if not, that’s fine, just read along to understand how to implement vue-router)

vue-router: Vue Router is an official router for Vue.js, we can also handle routes in server side by using hapi.js, however, vue-router is very similar to react-router and if you come with react background this is just a piece of cake.

I personally like vue-router for its features like nested mapping, support to transition effects, easy configuration of components per route, and it is very easy and straightforward to implement. Let’s see how it works.

Step 1. Install vue-router (Installation of vue router is already done if you are referring to my previous article)

npm i vue-router

Step 2. Let’s create a simple two vue components, HelloWorld.vue, and HelloAgain.vue

HelloWorld.vue

HelloAgain.vue

Step 3. Create a router folder and have an index.js file where the definition of routes are defined for the components

router’s index.js

We are importing vue-router, letting Vue know we would be using this routing definition and then just define the route pattern inside routes array. It is as simple as that.

Note: Want to learn more about router construction options?

Step 4. Integrating route to your Vue app

We are all set, we have our components, well-defined router and let us tell our application to use these in our main.js file

main.js

Just two steps, import your router and add the router in your vue instance. That’s it. we are all set to serve the application and see if this routing works

Step 5. Run the app and verify if vue-router works

npm run start

in your browser hit http://localhost:8080/

Now try http://localhost:8080/hello-again

Browser

Dynamic Route matching:

vue-router provides the ability to pass route params and it is very easy to catch the param value and use it in your component. For instance, if we want to display the details of any list items and pass the id of the selected list in the URL like,

http://localhost:8080/hello-again/1

then, we can achieve that, with the code below

Just add :id in the path property and handle the rest in the component

HelloAgainWithID.vue

http://localhost:8080/hello-again/1 (Browser)

this.$route.params

If you want to handle multiple dynamic segments, your path will look like

/hello-again/:id/username/:user

and your this.$route.params will be

{ id: "1", user: "prashanth"} 
for URL /hello-again/1/username/prashanth

Next up:

1. A brief introduction to VueX and State management
2. A working application with cityOfChicago.org data

Learn more about me here,

www.prashanthpnaika.com

https://www.linkedin.com/in/prashanthnaika

https://github.com/pnaika