Made withVue.jsClip

Vue JS 2 Tutorial #39 - Setting up Routing

N

Net Ninja

Creator on the Vue.js channel

Watch on YouTube ↗

86K viewsMay 25, 20178:23 runtime

Learn how to implement client-side routing in your Vue.js 2 application using the official Vue Router library. This tutorial guides you through installing Vue Router via npm, configuring it in your main application file, and defining your URL paths. You'll see how to create a…

Chapters

#vuejs#clip#frontend

Setting Up Vue Router

This document outlines the key steps to add client-side routing to a Vue.js 2 application.

Why Use Routing?

Most web applications need multiple "pages" (e.g., a blog list, an "add new blog" form).
Routing allows you to dynamically show different components based on the URL the user visits, creating a multi-page experience without full page reloads.

Step 1: Installation and Setup

Install the package: Since routing is not part of the core Vue library, you must install the official router package.
```
npm install vue-router --save
```
Enable in Vue: In your main entry file (main.js), you need to import VueRouter and tell Vue to use it.
```
import VueRouter from 'vue-router';

Vue.use(VueRouter);
```

Step 2: Defining Your Routes

It's best practice to define your routes in a separate file for organization.

Tip
Create a src/routes.js file to keep your main application file clean.

In routes.js, export an array of route objects.
Each object defines a single route and has two key properties:
- path: The URL path (e.g., '/' for the homepage, '/add' for a form).
- component: The Vue component to display when the path is matched. You'll need to import these components at the top of the file.

// routes.js
import ShowBlogs from './components/ShowBlogs.vue';
import AddBlog from './components/AddBlog.vue';

export default [
  { path: '/', component: ShowBlogs },
  { path: '/add', component: AddBlog }
];

Step 3: Creating and Registering the Router

Back in main.js, you need to create a router instance and register it with your main Vue instance.

Import your routes: Import the array you just created.
```
import Routes from './routes';
```

Create a router instance: Create a new instance of VueRouter and pass your routes to it.

const router = new VueRouter({
  routes: Routes // You can use the shorthand 'routes' in ES6
});

Inject into Vue: Add the router instance to your root Vue instance.

new Vue({
  el: '#app',
  render: h => h(App),
  router: router // You can use the shorthand 'router' in ES6
});

Step 4: Rendering Routed Components

To tell Vue where to display the matched component, you use the <router-view> component.

Place <router-view></router-view> in your main App.vue template (or wherever you want the routed content to appear).
Vue Router will automatically inject the matched component into this location.

Note
By default, Vue Router uses "hash mode," which adds a # to your URLs (e.g., example.com/#/add). This can be changed to a cleaner "history mode," which will be covered separately.

Introduction to Vue Routing

Hi campers, welcome to your 39th Vue.js tutorial. In this video, I want to show you how to set up routing in your Vue application.

Okay then, so at the minute our blog application right here only really has one page and what we're doing is just nesting different components on this one page to kind of control what we see in it, right? But really, most applications have more than one page. If you go to for example /addBlog, then you'll go to the add blog page where you can add a new blog. Or if you go to /blogs, then you see the blog page, etc.

Okay, so to do this, what we're going to have to do is set up routing in vue.js so we can kind of dynamically show different components dependent on which URL the user goes to. Now routing doesn't come shipped with the core vue.js Library. We're going to have to install a third-party package.

Installing and Configuring Vue Router

So to do that, let's go to our terminal and install it. And we can do that by saying npm install vue-hyphen-router and we're going to save this to our dependencies. Okay, so once that's downloaded, we can now use it in our application.

So to do that we need to go to main and we need to say view.use, but this time use the view router. So first of all we'll need to import it. So we'll say import viewRouter from 'vue-hyphen-router'. Now we can do this thing down here to say we want to use it in our application. So we'll say view.use and then this time viewRouter.

Creating the Router Instance and Routes File

Okay, so now we can make use of the view router and start setting up some routes. So how do we set up these routes? Well, what we need to do is create a new instance of the view router that we've just used here. Okay, so let's do that. First of all we'll say const router = new VueRouter. So that's that thing right here. Okay, so we're making a new instance of this view router and what we need to do is pass in here an object which is going to take our routes. So we need to register our routes here.

Well, we could register them here, but what I like to do is keep them separate outside in their own little file to keep everything organized. So I'm just going to leave that here for now, save it. Also going to save this app.vue and what I'm going to do is create now a new file in the source folder called routes, so we'll call this routes.js. Okay.

Defining Routes and Components

Now then, we can register or kind of make up all of our routes in this file. So the way we do this is by exporting an object, or rather an array of objects, okay? Because we have an array of routes, each element in that array is going to represent a different route. So we can export this because we're going to import it later in a different file. So export default and this is going to be an array. Okay, so in this array, each object like this would be a route, and then each object would have different properties in that route. So let's just do two for now, keep it simple.

So the first property in the route object is going to be the path. And this is what comes after your kind of root domain name. So if your website is www.mywebsiteisawesome.com, the next bit after that, forward slash whatever, is your path. Okay? So I'm just going to say forward slash for now, and this is going to be kind of like the root path, the homepage if you like. So I'm saying here if a user goes to forward slash, I want to show something. And what do I want to show? I want to show a certain component. So we can say as the second property, component. And if someone just goes to forward slash, I want to show the showBlogs component. So a list of the blogs and that little snippet underneath each one. So I need to import that component in here so we can use it. So I'm going to say import and it's going to be showBlogs from, and it's in the component folder, so it's ./ to say current directory, then the components folder, /showBlogs.vue. Okay, so now we've imported that and we can say the component we want here is this thing, showBlogs.

Okay, so if we go to forward slash we're going to show this component. Let's set up another one. We'll say path, and this time we'll say forward slash add. And this is going to be the path to add a new blog. This time the component that we want is going to be this addBlog component. So let's copy this dude and paste it underneath, and this time it's addBlog and same over here, addBlog. Okay, so now we can just copy this and paste it down below. So now if someone visits /add, we get this component showed. All right.

Registering Routes with Vue

So now we've kind of defined our two routes that we want to use in this application. And at the minute this is not going to do anything because we're not kind of registering these routes anywhere. We're just exporting an object, or rather an array of objects. So what we want to do is go to the main.js file and we want to import this and register them in this new VueRouter instance. Then once we've registered them, we can start to use them. So the first thing we need to do is import this file, yeah? So we can do that right here.

We can say import routes and I've made this name up, you can call it whatever you want, from and it's going to be from this file right here. Okay, so it's just routes.js. So I can just say ./routes like so. Okay, so now we've imported that and what we can do is register the routes in this new VueRouter instance. Okay, so it takes a property called routes and this is going to be equal to this thing we've just imported. So we'll paste that down there. So this right here was imported from here. So it imported this thing and now we're using that as the route. So it would just be the same as registering them here in an array like that and then doing your different routes in there. But what we've done is externalized them into a different file, keep everything organized, and we've imported them and placed them there like that. Okay, so the same thing.

So now we've registered the routes right there. Now we need to say in this Vue instance, the router which we want to use. Okay, so we've created this instance of the view router, but we're not doing anything with this view router. So what we need to do is say we want to use this view router in this view instance. So to do that, dead simple, all we say is router, and that's going to be equal to this thing right here, router again. So I'm going to paste that in, save it, and now we can use these routes in this view instance.

Rendering Components with

But where are they going to go? Because at the minute, if we go forward slash add, it's not going to do much, right? Because we've not said where we want these components to load in when we go to these routes. Now we need to do that in our root component right here. So instead of hardcoding this component, what we want to do instead is use this tag. It's called router-hyphen-view. Okay, so now we're saying this is where we want the components to get loaded in when we visit those routes. So if I save this, if I go to /add, it's going to load in the addBlog component here. If I go to just forward slash, it's going to load in the showBlogs component here. Makes sense?

So let's see now. If I'm at /add, it goes to this. If I just go to forward slash on its own, it's going to go to this. Pretty cool, right? So now we've created these routes. But check this out, you'll notice this hash right here in the middle of the route. And that is basically so that vue.js can use this hash mode to store these different routes and use them. Now ideally, we don't want this in. I like clean URLs, so if we just go to /add then that's the route instead. So what I'm going to do in the next tutorial is show you how to use this kind of approach instead of the hash approach.