How to Handle Routing in Vue With Vue Router

Handle Routing in Vue With Vue Router:

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.

Using the Vue Router: An Overview

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.

The JavaScript code for managing routes in your application can be found in the index.js file located in the router folder. Two functions—createRouter and createWebHistory—from the vue-router package are imported into the index.js file.

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.

You must export this router instance after setting your routes, then import it into the main.js file:

• import './assets/main.css'
• import { createApp } from 'vue'
• import App from './App.vue'
• import router from './router'
• const app = createApp(App)
• app.use(router)
• app.mount('#app')

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:

• <script setup>
• import { RouterLink, RouterView } from 'vue-router'
• </script>
• <template>
• <header>
• <nav>
• <RouterLink to="/">Home</RouterLink>
• <RouterLink to="/about">About</RouterLink>
• </nav>
• </header>
• <RouterView />
• </template>

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 ("/").