How to add router in Vuejs project

Router is enabling us to use vue app as different URL enabled , such as one of Home, About etc. It is not a new feature, it exists in react, angular etc.

Virtually router turn single page vuejs app into multi page app, in reality these pages are components (known for developers, not the end user). When the user click on the link Vuejs simply switching between these components.

Vue Router

By adding a Vue router to our app Vue will create additional folder structure , a router, view and configuration files.

View and Router

Views are page components ( url such as /about), which can be consisting of other components to. You can create additional pages as you wish and should configure on the router file.

New Vue project with router

In the CLI command we can specify whether want to use router on not, that is it.

For existing non router project

For existing non router projects it is possible to add router, but be careful that the app.vue file will be replaced by the vue CLI. So copy the content to clipboard or another file and move it back when the process is completed.

Issue the following command to add router using the vue CLI.

vue add router // say no to history

That is all you know about router,

The following vue post posts may help you

Published by


A developer,teacher and a blogger obsessed with Python,Dart and open source world from India

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.