Search⌘ K
AI Features
Home
Courses
Building a WhatsApp Clone with Vue.js and AWS Amplify

Routing in Vue.js

Explore how to use vue-router for managing navigation in Vue.js applications. Understand structuring routes, dynamic and nested routes, redirects, and how to protect routes with navigation guards. This lesson equips you to create scalable and secure routing in your Vue.js projects.

We'll cover the following...

Introduction

Vue-router handles routing in Vue.js. When we were scaffolding our application in the lesson “Structuring Vue.js Application,” we selected “Router” when we used the command vue create educative-whatsapp-application. This means vue-router was installed and configured in our project. If we want to manually install it, we use the following command and update the main.js file.

// install vue-router
npm install vue-router
Javascript (babel-node)
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
Vue.config.productionTip = false;
new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

Routing allows us to move between screens.

Structuring routes folder

In general, we can always bundle all our routes in the /router/index.js file. The only disadvantage is that when our application grows and more routes are added to this file, it will ...