Building Single-Page Applications (SPAs) in Vue is made possible by Vue Router, the official router for Vue. Handle Routing in Vue With Vue Router, you can manage your application's history stack, map the components of your web application to various browser routes, and configure sophisticated routing features.
Start your Vue application by running the following npm (Node Package Manager) command in your preferred directory to get started with Vue Router:
Choose Yes when asked if you want to add Vue Router for developing single-page applications.
Open your project in your favourite text editor after that. There should be a router folder in the src directory of your app.
An object is used by the createRouter function to generate a new route configuration. The history, route keys, and their values are contained in this object. As can be seen in the image above, the routes key is an array of objects that describe the configuration of each route.
The router function was imported into the main.js file, and the use method was then used to make this router function available to your Vue application.
After that, you can integrate your routes with your Vue application by creating a code block that looks like the one below:
The code block mentioned above shows how to utilise the Vue Router in a Vue component. RouterLink and RouterView are two components that are imported by the code snippet from the vue-router library.
In the code snippet above, the RouterLink components create links to the Home and About pages. When you click a link, the to attribute provides the path to the navigation route. Here, you have two links: one that points to the "/about" route and the other that points to the root route ("/").