Complete Vue Router 4 Guide: Basics, Programmatic Routing, Navigation Guards, Transition Effects and Composition API

Check out the full video course:

https://www.udemy.com/course/complete-vuejs-3-course/?referralCode=75F591E320BC4EA22188

Introduction to Basics

A Vue program is a single-page application. A Vue page is made of one or several Vue components. To present different pages to users, we just need to stack different Vue components together.

The simplest way to manage components is to use dynamic components. The is attribute decides which component will be mounted. We prefix the is attribute with the v-bind directive and assign a dynamic value to it. By changing the value assigned to the is attribute, we can switch components.

The content being displayed has changed, but in reality, we have never left the current page. The URL in the address box has never changed . All we did is switching components displayed via the component tag. This is why the browser’s forward and backward button are still disabled.

But from the users’ perspective, they have visited three different pages. These three buttons are just like normal navigation buttons. Every time they click a button, they will be presented with a new page.

But unlike real web pages, the About and User page cannot be shared or saved as they do not have their own URL. They are just different states of the same page. Obviously, this is not ideal or even acceptable in many situations.

Vue Router is an official Vue plugin, dedicated to helping us manage components. It enables us to assign a URL to every component combination so that a single-page application can behave like a normal multi-page website. Each virtual page can has its own URL.

We are using Vue 3, the matching Vue Router version is 4. The manual address is here.