Building a WhatsApp Clone with Vue.js and AWS Amplify/

...

/

Routing in Vue.js

Routing in Vue.js

Learn how routing is used in Vue.js to navigate between different pages in a single-page application.

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

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 ...