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.
Top comments (0)