Vue Js 3 Router

Posted on  by admin

In this article we are going to learn how to handle routing in Vue 3. Routing in Vue 3 is a little different from how we did it in Vue 2. Otherwise, most of the features and how we handle things such as handling scrolls and navigation guards remain unchanged. What we will learn. Setting routing from scratch.

Programmatic Navigation

Handling error 404 (Not Found) pages. Installing from Vue CLI. To install Vue 3 we can do so depending on your preferred package manager. We can now create our Vue 3 application. Run the command below on the terminal.

Npm

Please choose default Vue 3 preview. A Vue 3 application will be created with the folder vue-routing. Now we will change our directory in to the folder and open it with your favorite text editor.

This will change our directory into our application folder.

If you are using visual code run the command. The command will open the application folder with visual studio.

Vue has vue-router package that handles routing in Vue. To install this package into our application we run the command below.

The command will install vue-router into our Vue 3 application. Inside our application folder, we will create a router file and name it router.js.

Handling 404 Not found Routes

Inside this file is where we will handle all of our application routing functionality. From vue-router we will need two important functionalities that is createWebHistory and createRouter.

  1. createWebHistory — setting the routing mode to history.
  1. createRouter — create our router. We can then create our router which will be an array of objects.

In the objects we will need to specify the path, component and name which is optional.

Path — will specify the path we want to be direct to. For example, ‘/contact’ will direct to localhost:8080/contact.

  • Component — This will be the components that we want to be rendered when the route specified in the path is matched.
  • Name — This is optional but we can use it in case of the component and it will match the same component.
  • After setting our routes we can then proceed and set up our routing functionality.

We set history to createWebHistory (). Earlier before we could just set the mode: history. We can now set the routes which is a shorthand for routes: routes. To set for 404 not found pages inside our routes we can set the path to catch all the Not found. To set for this, we set the path as shown below. This will catch also for pages that are dynamically created.

Now we have set our routing functionality. Remember to export the router.

Now inside the main.js file we will import our router file and use it inside the createApp.

We can separate our application flow as follows. We can similarly chain this all together as shown below.

Now inside our app.vue file we can set where we would want our application to render the components using.

This we simply do normally using. To provide links to navigate within our application we use. Notice we also provide a to, this will specify the URL where the user will be directed to.

We can as well have Vue routing enabled in our application without handling a lot of the things.

During application creation using the Vue CLI select vue-router on the prompts provided during project creation and Vue will do all the routing functionality for us.

Almost similar to what we have done. A recap of what we have learnt:. Setting routing from scratch. Handling error 404 (Not Found) pages. Installing from Vue CLI. Thank you for following through this far. I hope you have learnt a thing or two about routing in Vue 3.

If you found this article helpful please do not hesitate to share with others. One of the most powerful features of modern single-page web applications (SPA) is routing.

Modern single-page apps such as a Vue application can transition from page to page on the client-side (without requesting the server).

Vue Router is the official library for page navigation in Vue applications.

Vue Router is simple to use, yet powerful. In this article, we will deep dive into Vue Router 4 (used with Vue 3). We will go over everything you need to know to use Vue Router comfortably. Vue Router Fundamentals . Dynamic routing .

How to pass router params.

Whether you are a beginner just getting into Vue Router or a seasoned JavaScript/Vue developer looking to skill up, there’s something for you in this tutorial.

Let’s get started. 👉 We have also created a completely free in-depth Vue Router video course. If you learn better by watching videos, we highly recommend you give it a shot.

Let App use Vue router

Click here to watch the Vue Router course. Let’s create a new project and get right into coding. We’ll create a new project with vue-cli. If you don’t have it installed you can install it by running npm install -g @vue/cli.

Next we can add the Vue Router to our project by running the following command.

The cli will ask if we want history mode.

For this tutorial we’ll be using history mode, so we’ll select yes. Let’s take a look at the folder structure that was created for us.

Yarn

A folder named views is created for us along with two files About.vue and Home.vue. These files represent our pages. A file named router/index.js file is also generated. This file contains all the router configurations.

Let’s open up the router/index.js file.

We are importing createRouter and createWebHistory from the vue-router library. Next, we import the Home component from views/Home.vue. On line 3 we are declaring an array of objects named routes. This array represents our routes in the application.

Routing in Vue 3 explained with example

These array items are called route objects. The first route object has a path / which means this is going to be our base URL. The component property represents what component will be rendered when the user visits this path.

We will render the Home page on this path. Finally, the name property represents the name of the route.

We are pretty much following the same logic for the /about the path.

However, instead of directly importing the component we are importing it through Webpack’s code splitting feature.

More on this later. Now let’s jump into App.vue file. Observe the router-link tags.

These tags are just fancy anchor links.

However unlike an anchor link ( tag) the will not reload the whole page.

Remember Vue is a single-page application. The data for the app is already downloaded from the server. When we route to another view the application just hides some information and displays the requested information.

router-link tags have a to property which refers to which page to visit.

The tag is what renders the right component when navigation links are triggered.

Let’s add our own route to this application.

We need to add a new router-link to App.vue. Next we create a new component in the views directory.

Finally, in our routes array we have to import this and specify the route path.

How to create a route to a component

That’s it we have our own routes added to the application. First of all, let’s take a look at what router parameters (router params in short) are and why they are important. Let’s say we have a page in our application where we show users a list of all the blog posts available.

Let’s say in our application this path is /posts. When a user clicks on any of these articles the user is taken to that article page.

For each article the path will be different (/posts/article-1, /posts/article-2, etc.).

How do we achieve this? We can add a new route for every post we have, but then we have to change our code every time a new post is published.

Therefore, we will use a dynamic route. This is where router params comes in handy. In our application, we can specify a generic route like the /posts and, then we can specify optional route params to the same route like this /posts/:id. The :id picks up any dynamic string as a parameter. This means we can now route to paths like /posts/article-1 , /posts/article-2, etc.

and the Vue router in the application will know which path we are trying to go to.

Let’s see this in action inside our application. In our router-link tag we can use the :to property to pass in an object with name and params data.

Lazy loading views

The params object can be any type of data (i.e. strings, numbers, objects). In the code snippet above we are passing in an object with username with a string value (mark2021). When we add Vue router to our Vue application we get access to a special $route object inside the global scope of our application.

This object holds all the router information of our application. We can access $route object by simply calling this.$route. The params information is also available within this $route object. We can access the params object inside of the Profile component through the $route object.