How to navigate in vue?

The creator of the Vue router has developed a set of utilities to create routes in Vue. When you create a route in a file, you should associate it with components that will be loaded when the user navigates to it.

If you have installed the vue-router, you will be able to install it. We are going to see how it is installed if you don't have it installed.

If you have a package called within the dependency section, you should look in the package.json file.

I have version 3.0.3 but you can have another version, nothing happens.

If you don't have vue-router installed, you have to install it within the project and execute it through the command line.

The same level of main.js is used to create a file called router.js.

The first thing you have to do is import the two programs and make vue use the routers.

This file is already in your possession if you installed the vue-router with vue-cli.

Routes are created in an array with this syntax.

The root path is the one that is opened when the page is opened.

Each route is created in the form of an object. In the path you indicate the route that you want to use (for example “/users”), in the name you can give a name to the route to identify it later, and in the component you put the component that you want to be used in that route, so you will have to import it like this:

I import the routes from a folder called views inside the src.

It is necessary to identify which components are in charge of the views.

If you want to locate the component that is responsible for rendering the /users route, all you have to do is go to the views folder.

You have to put this under the routes in the same file so that Vue can use them.

The main.js file is used to pass the routes to Vue, so that you can put this in the main.js file.

We would already have a route working in Vue with this. If you want to add more routes, you have to add more objects to the routes array of the router.js file.

The Users component from the views folder will be loaded when you navigate to the path http://localhost:8080/users.

The Home component will be loaded if you navigate to http://localhost:8080/.

You can use the vue router to create a new route for yourself.

The name of the route you have defined can be used to create the redirecting.

The path user is changed when they navigate to that path. There are also aliases, which are similar, only that they keep the user in the route but with the component of another.

The code above means that when the user navigates to the /error route, it will load the Error component and keep the user on it.

When a button is pressed, or when an action occurs, the web application can be accessed from other routes. You can navigate from code to the routes you have defined.

A special tag is created when installing vue to make it easier to navigate to the routes in the system view. Let's see an example.

You can navigate to a route using the name that you have configured before in the routes array, this is interesting because if you change the url of the route, you will be able to continue navigating correctly.

The colon is put before the attribute in order to pass a javascript object.

You can pass a variable to decide which path to take.

A link to the path will be created.

This tag will make a a> tag with the href already set to the path you specify.

This form is used to navigate to a component's logic. It simply navigates to the route that we pass on. You can use the name of the route instead of its route if you pass an object here.

You don't need to import anything, as the $router variable will be created inside the this with the router instance so you can navigate from the components.

It works the same as the other one.

The current route is saved in the browser's history so that the user can return to the previous page if they click on the back button.

Clicking on the link will prevent the user from returning to the previous page.

This is usually used when we want to remove a user from a page and we don't want it to roll back the browser's history, for example.

It is used to decide if we want to go back or forward in the history of the user's browser.

We are going to see more complex functions of the vue router. It is not very difficult to comprehend, so don't be alarmed.

One very interesting thing that you can do in the routes is to pass parameters in the route query, for example, imagine that you want to have a route called users in which all the users are shown and you also want to link to that page from another page users view but in that case you want the users to be sorted in descending order, that is, you want to be able to decide before navigating to the route if you want to sort in ascending or descending order.

It can be useful to pass parameters in the routes. The parameters are the same as in the request of the application. The route would be formed like this: /users/?sort

You can add this type of function without having to create the routes.

You only need to create the users path for this example.

You have to put the link in the routers.

If you use the vue-router push or replace.

If you notice, you have to pass a query object where the name of each key will be the value of the field in the url query.

You can access the value of the data within the user list component.

This.router is a different object than this.router, which contains information about the route you are currently on. You can access all the fields from this object.

You can now use this information as you please, for example, within the created or in computadas.

We need to install the Router tool from the Vue CLI to create a project. When choosing the tools that our project will have, we must also select the Router and History mode, which will allow us to change the route without the need for the page to reload each time.

We can use the terminal to create our project. There is a If we use the ui to create our project.

If you already have a project that doesn't have vue, you can use the following command to install it.

If we use that configuration or the command that we show in the previous line, we will create a folder called router in which the index.js file will be located, where we will declare the routes that we want in our project. You'll add the necessary code to the main.js file to make sure the routes work correctly. Let's explain a bit about the code in the file before moving on.

When working with routes, it's important to point out where our views will be. vue has a special tag called router-view/>. The views should be rendered where this tag is placed.

To create the navigation menu buttons between routes, we have a special tag called router-link>, which we must attribute to our view.

A good use of these two tags is to create a navigation menu and at the bottom place the label where each view will be rendered when changing routes through the navigation menu The following example is an example.

When the route they point to is active, we can style these tags. The a.router-link-exact-active that Vue gives us is an exact-active which must be placed inside a div that has an id.

The id that contains the router-link> tags is #nav.

Ready. We can create routes to navigate between the views of our project.

Routes with parameters are used to send information to a specific route in a way that parameters are recovered in the view and we can perform some action such as searching for information.

The following form is needed to create this type of route. The id is the name of the parameter to send to.

The following code is needed to get the parameters that were sent by the route.

We know how to define our routes with parameters and how to get the parameters we send.

The question is how to send parameters there.

We have two cases for this. Sending static parameters is the first case that should be sent. The following example shows where we open the services route and send the parameter 5.

If we have a route with parameters, the appropriate thing to do would be to send a variable that we have stored or that is generated as its parameters.

The second case is the same as the first one, placing variables to the parameters we want to send.

To be able to use variables inside it, we need to use :to and. The following example shows that this is required.

The name of the route and the number of parameters to be sent are the objects that are contained in the object.

Thanks to the @click event, we can go to a specific route from a button or other tag. The method that will be executed when clicked must be created. We will use this method to push a route.

The back and forward buttons in the browser can be used to go back or forward in navigation. The $router.go(-1) and $router.go(1) methods are used for this.