Skip to main content

Software Development

Unlocking the Power of Vue Router: A Complete Walkthrough

Businesswoman Holding File Folder In Futuristic Vr Environment

Understanding Vue.js Router

Vue.js routing acts as a guide for your web application, instructing it on which page or component to showcase as the URL shifts. This functionality enables the creation of interactive, multi-page experiences within the framework of a single-page application.

This blog, we’ll explore the essential elements of Vue.js routing, encompassing route creation, navigation across pages, and the handling of dynamic routing.

Step 1: Install Vue Router

The initial step is to incorporate Vue Router into your project. If you’re leveraging Vue CLI, it’s effortlessly integrated by including Vue Router during the project’s creation. Otherwise, utilize npm or yarn for installation.

Img 6

If you’ve already installed Vue Router during the initial Vue CLI setup, you don’t need to install it separately. It’s included in your project by default.

Step 2: Create a Router Configuration

Make sure you have components corresponding to each route defined in your router. For instance, Home.vue, About.vue, and others. Path: src/view/Home.vue

Img 8

The ‘Logo’ component shows the Vue logo image and is used within the content of the home page component. Its name is ‘Logo’.

Img 11

Repeat this About.vue structure for other components like ContactUs, Careers etc.

Vue Router Configuration: 

Create a router configuration. Path: src/router/index.js

Img 9

  • createRouter({ … }): is creating a router object, which is like a map that helps your Vue.js app know how to handle different web page URLs.
  • createWebHistory(): is specifying the type of history mode for the router. In simple words, it tells the router how to manage the URLs in the browser.
  • routes: is an array that lists all the different pages or views in your app and what component should be displayed for each URL. For example, you might have a route for the “Home” page and another for an “About” page.

This code configures routes in Vue Router for different pages: Home, About, ContactUs, and Careers, each linked to a specific URL path and Vue component. It sets up the router to manage navigation based on these routes in a Vue.js app.

Step 3: Plug the Router into Your App

In your main app file (main.js), integrate the router:

Img 3

This code initializes a Vue.js app using a root component named ‘App.vue’. It also includes a router for managing different pages and mounts the app to an HTML element with the ID ‘app’, making it visible on the webpage.

Step 4: Use Router Links

Now that the router’s set up, utilize <router-link> for navigation:

Img 4

Output:

Img 5

Img 10

 

  • <router-link>: These are Vue Router’s special components that create links for navigating between different routes (pages) in your application.
  • <router-link to=”/” >Home</router-link>: This code produces a link labeled “Home.” Clicking it directs users to the route defined as “/”—typically, representing the homepage. To extend this navigation to other components like About.vue, ContactUs, and more, replicate this link structure and specify the page path.
  • <router-view>: Another specialized Vue Router component serving as a placeholder. It displays content based on the currently active route. Clicking a <router-link> element triggers the rendering of the associated route’s component within this <router-view> element.

In simpler words, this code makes a menu with links to “Home,” “About,” “Contact,” and “Careers.” When you click a link, it shows the content for that page right where you are. It’s like a map that lets you move around your Vue.js app easily. The “router-link” makes these clickable links possible.

Conclusion

Vue.js routing guides your app to display different pages as the URL changes. This blog explains how to set up routes, link pages, and create a navigation bar using Vue Router. It shows how clicking links instantly shows the related content, making your app easy to navigate.

Leave a Reply

Your email address will not be published. Required fields are marked *

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

Anam Firdous

Anam Firdous, an associate technical consultant at Perficient, excels in front-end development, particularly in Sitecore, and holds expertise in SCORE. Her focus lies in crafting top-notch web solutions across diverse industries by leveraging various front-end technologies, showcasing her prowess in UI development.

More from this Author

Follow Us
TwitterLinkedinFacebookYoutubeInstagram