Vue router with typescript Part 2

Guilherme Neves — Mon, 06 Feb 2023 11:53:31 +0000

Before I start explaining how to use the vue router in a project, I'll explain what routes are and how they work for SPA users.

What is a SPA (Single Page Application)?

SPA are web applications in which the user interacts in only one page, that is, when performing some action on the page it will not need to be completely reloaded.

No SPA (No Single Page Application)

When an application is not a SPA and the user tries to go to the profile tab, the page is completely reloaded.

SPA (Single Page Application)

Twitter is a SPA application where when clicking on the profile or any other part of the page, the page will not be completely reloaded, but only what needs to be changed will be loaded, but for that it is necessary to configure a routing system.

Explanation Scenario

Let's create a fictitious scenario where we have an application with a top menu with 3 options: Home, Users and Courses.

When clicking on one of these three items, it is necessary to load a content below the menu according to what was clicked.

Having known the scenario, the first thing we can realize is: "The menu will not change at any time". Knowing this then only the content must be changed, so this is a case where we can use routes.

What does vue-router do?

Still using the scenario created and thinking only about using vue, what would you do? when clicking on a menu item the developer would show the corresponding component.

With the use of vue-router in your project, this component modification logic is carried out by vue-router, in addition to being able to perform other functionalities such as: validations, route configurations and child routes (I will explain in the future).

I'll be back soon to continue explaining about vue-router. Let me know what you think of the post and any questions you have.

See you later.

Vue router with typescript Part 1

Guilherme Neves — Fri, 03 Feb 2023 13:35:35 +0000

I've been finding a lot of people struggling with routes in vue where I work, so I decided to put together an article to clear up some doubts about routes.

Why use routes in a project?

Routes will help the user to create navigation where you can go from one page to another without needing to reload.

Like any skill, it will take some effort and practice to master Vue Router.

How do I install vue router in my project?

There are two ways to insert the vue router into a project.

The first way is to create the project and in the initial setup select that you want to start the project with routes.
The second way is in an ongoing project. To install it in the project, run the command:
NPM
npm install vue-router@4
YARN
yarn add vue-router@4

Route configuration

After installing vue router in the project, some files are created for you to configure your routes.

In this file we are going to perform most of the configurations related to routes in the project.

Let me know what you think of this short introduction to vue router in the comments and if this is something you can use in your projects. I'll be back as soon as posible for part two, where I'll delve into route settings.

Until later!

DEV Community: Guilherme Neves