How to add router in Vuejs project

How to configure vue router for new and existing projects


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

Author: Manoj

Developer and a self-learner, love to work with Reactjs, Angular, Node, Python and C#.Net

Leave a comment

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