Right now, we have a working Vue.js application and we are ready to implement some functionalities in it. But before we start creating some great functionalities we are going to create the navigation to be able to navigate through our application. We already have vue-router in the application and we are going to use it to create new routes and connect it to the components.

We are going to use the Bootstrap library for styling our components.

For the complete navigation of this series, you can visit Vue.js Series.

To download the source code for this part, visit Routing and Navigation.

Let’s start with the installation.

This post is divided into several sections:

Installing the Third-Party Library

Let’s navigate a terminal to the root of our application, and type: npm i bootstrap-vue.
After that, we are going to notify Vue.js to use Bootstrap and then the Vue.js file is going to register all the Bootstrap components for us. We are going to import the styles as well.

To do that, let’s open the main.js file and modify it:

Vue.use() is the function which is used to install vue plugins. It will trigger the install function inside a plugin. In this case, the Vue.use() function will trigger the install function inside the BootstrapVue plugin and that function will register all the Bootstrap components for us.

Creating a Navbar Component

Let’s navigate to src/components and create a new file named Navbar.vue. In our navbar, we are going to have 3 nav links:

  1. A link to the homepage
  2. A link to the owner actions
  3. And a link to the account actions

Because Bootstrap is our styling library of choice, we are going to use its components as much as possible. So, let’s create the Navbar.vue file:

Currently, our links are not pointing to any location, thus we use the # sign, and that’s because we have not made our routes and components yet. Let’s make a route and a component for our home page and then edit this file again to use the actual route.

Creating Routes and Components

Let’s open the routes/index.js file:

This is the same HelloWorld component from the end of the previous part. We are going to delete it and create our first component – Home.vue and then make the route which is going to render that component. Let’s start with component first.

Creating a New Component

We are going to create the Home.vue file in the components directory and modify it:

Creating a new Route

Let’s open the routes/index.js file and modify it:

Now, we need to include our navbar somewhere in our project. Let’s open the App.vue file. In this file, we are going to remove the vue-cli generated template from the previous part and delete the Vue.js logo and style as well.
Then, we are going to import our Navbar component and register it so we can use it as a tag in the template. We also want to use Bootstrap as much as possible so we are going to replace our main div tag with the b-container.

So, let’s modify the App.vue file:

Let’s open the Navbar.vue file again and add the real route to the Account-Owner Home link:

You might have noticed a strange parameter :to and a JSON object next to it. This is how we pass some data to our components and we are going to learn more about that in the following parts of this series. Stay tuned!

Let’s start the application and inspect the results:Welcome to account-owner application - Routing and Navigation in Vue.js

Great!

But what if someone goes to URL which doesn’t exist, like http://localhost:8080/#/whatever?
We need to display NotFound component when this happens. Let’s implement that.

Creating the NotFound Component

We are going to create the catch all route which will be triggered when none of our routes are matched.

Let’s first create the NotFound.vue component. In the src directory, we are going to make a new directory named error-pages. We are going to put our NotFound.vue component which only shows the message like page is not found in that directory.

Here is how the ‘NotFound.vue’ file looks:

Now, we are going to open the routes/index.js and add the catch all route:

Let’s inspect the result by navigating to: http://localhost:8080/#/whatever
404 Not Found - Routing and Navigation in Vue.js

The last thing we want to do is to change the routing mode from the hash mode to the history mode. It’s a lot prettier to remove # from the URL. History mode relies on the browser’s API history.pushState and it gives us the ability to navigate without # in the URL. Vue.js router will use hash mode as the fallback if the browser doesn’t support history.pushState.

Let’s open the routes/index.js file and add another parameter to the Router constructor:

Conclusion

As you can see, creating our navigation menu and linking routes with components has been a pretty easy and straightforward job.

In the next parts, we are going to make more complex components and create routes for all the remaining navbar links.

By reading this post you’ve learned:

  • How to create a navigation menu
  • How to create simple components
  • The way of creating routes and connecting it with the components
  • And how to change from hash mode to history mode

In the next part of the series, we are going to show how to install, configure and use Axios HTTP client and how to create and use environment files.