How to Use Routing in Vue.js ?

Vue Router helps link between the browser's URL/History and Vue's components allowing for certain paths to render whatever view is associated with it. A vue router is used in building single-page applications (SPA).

The vue-router can be set up by default while creating your new project. In this article, we will install it separately. So we can see how it works.

Project Setup and Module Installation:

• Step 1: Vue Router can be installed through Npm with the package named vue-router using below command.

  npm install vue-router // OR 
  vue add router 

  It can be used via a script tag as shown below.

  <script src="https://unpkg.com/vue-router@4.5.1/dist/vue-router.global.js"></script>

• Step 2: Create our Vue project using the following command.

  vue create router-page 

• Step 3: After creating our project we will add our Vue router using the following command.

  vue add router

Project Structure: It will look like this.

Creating a Vue.js Project with Routing

This project uses Vue Router to add navigation in a Vue.js application. It shows how to switch between pages like Home, About, and Profile without reloading.

• Navigation is handled with <router-link>, while <router-view> dynamically loads the active component.
• This setup demonstrates the basics of client-side routing in Vue.

Main.js : Project Initialization File

• This file initializes Vue, connects the router, and mounts the app to the #app element.

views/Home.vue: Home Component

• This is the home page view.

views/About.vue: About Component

• This is the about page view.

views/Profile.vue: Profile Component

• This is the profile page view.

router/index.js: Router Configuration

• Here we define all our routes (Home, About, Profile).

Step to run the application: Run the server using the following command.

npm run serve

Output: Open your browser and go to http://localhost:8080/ you will see the following output.