Vue Router

In this lesson, we are going to learn how to use Vue router.

We will build our project using Vue CLI and the template we choose is webpack simple.

By default, webpack simple does not come with vue router. So we first need to install vue router using: npm install vue-router -S.

If you use webpack as template, vue router will be installed by default.

So first question, what is router?

In old days, a website is made of a bunch of HTML pages. Whenever you need to add new contents, you just create a new HTML file and add its URL to your homepage so that users can find the new page.

Apparently, this is not a very good design, especially for a website publishing lots of contents.

After years of development, single page application structure was developed.

Single page application, just like what its name has suggested, only has one page. It displays different contents by switching components. Router is what we use to manage the switches of components.

You can think of router as a store manager. It installs and removes components at user’s request.

Take a look at this example.

This is a very simple SPA. It is made of four parts.

This is the source code of this program:

In the components folder, we got six dot vue files. In other words, we got six components.

Part 1 is created by header.vue. Part 2 is created by navi.vue. Part 4 is created by footer.vue. Part 3 is made of one.vue, two.vue and three.vue.

In part 3, we only want to display one component at a time and we want to select components using buttons from part 2.

We can ask Vue router to help us manage component file one, two and three.

Vue router is a Vue plugin. Before you can use it, you need to do two things: configuring vue router and injecting it into vue root instance.

We will start with the configuring vue router.

For better program management, we will usually store all router config info in one JS file.

After we have completed that JS file, we import it into the the main.js file and inject it into Vue root instance. You will find many program demos configuring vue router in main.js directly. You can do this, but we recommend you use an independent JS file for router configuration. This can make future program maintenance much easier.

In the SRC folder, we create a new file: router. Inside router, we create a new file: router.js. Router.js will be our router config file.

If you use webpack as template, you will find a router folder in the SRC folder. The index.js file inside it is the router config file.

Every router.js file follows a fixed 4-part structure.

First, we need to import two packages: vue and vue router.

This is very important. Many people tend to forget to import the Vue package.

Remember, in the router dot js file, you need to import two packages: vue and vue router.

Next, we take over components control from the app.vue file.

Attention here, we only take over components we want vue router to control. Other components are still managed by the app dot vue file.

Here, we want vue router to control component one, two and three.

The header, footer and navi component are still managed by the app.vue file.

In the router dot js file, we call the use method from the vue object.

The argument value is vue router.

Next, we create a constant: routes.

This constant will record all routing rules.

Its value is an array. Each array element is an object.

One object represents one routing rule.

We have three buttons in total. So we need three objects.

Each object contains two properties: path and component. You will add more properties later.

Component is in singular form here.

The value of path is a virtual URL. You can think of it as a ID. It represents the component declared below. Vue router finds component using it.

Its value is picked by us. The value you set here will show up in user’s browser address box.

We recommend you start your URL with a slash. Slash represents root folder.

After you have set all routing rules, you can the VueRouter constructor and use the constant routes as its argument value. Then you new it and export default it.

Now, our job in the router.js file is done.

In the main dot js file, we need to import the router dot js file.

Then we install router in the Vue instance.

Now, our router config file is done and we have injected router into vue root instance.

Here we used a new es6 feature. Router will automatically expand into router:router. You just need to make sure you use router when importing the router config file. Do not pick other names.

Next, we go to the navi.vue file and install router-link. Router-link works like an A tag. Click it, the corresponding component will be installed. Its TO attribute is like the HREF attribute in an A tag. We assign path to it.

Next, we go to the main.vue file and install router-view. Router-view works like a stage. It displays components installed by router-link.

Now, we can switch among the three components by clicking the three buttons. Most importantly, using vue router, we can do this elegantly. Our codes are clear. If you want to make adjustments, you can do that easily.

Now we know how to set up a working router. But our router study is still not over yet.

We go to the router.js file and find the constant routes.

Currently, each array element has two properties. Let’s add a new one: name. You need to make sure every name is unique.

Name can replace path in router-link.

We go to the navi.vue file and replace path with name.

But before to, you need to add a colon.

The colon here actually represents the v bind directive.

The value we assign to the to property should be an object.

Inside the object, we install the name property.

In this way, we no longer need to set path in the router link tag. This can make our program easier to maintain. But don’t get me wrong, you still need to set the path property in the router dot js file.

Apart from taking you to places, URL can also carry data.

So how do we send data using router?

Sending data using router is called dynamic router.

To use dynamic router, you follow a three-step procedure.

Declare in router.js.

Assign value in router-link.

Receive value in component using $route.

In router.js, you first find the path property. At the end of its value, you add a slash and a colon. Behind colon, you add a property name.

In router-link, you add a new property: params. Params is an object. The value you want to send is installed inside the object.

Now, msg:hello has been sent into the first component. So how do we receive msg in the first component?

You need $route.params.msg.

Now, msg can be passed into the first component.

In our webpack lesson, we have learnt how to use lazy loading to improve program efficiency.

Vue router also supports lazy loading.

Basically, using lazy loading in vue router is very simple. All you need to do is to add an arrow function.

Our next topic is nested router.

In the component folder, we create a new component file: child.vue.

We want to display child.vue inside one.vue like this:

Nested router can help us achieve this easily.

First, we go to one.vue file and add router-view into it. We need it to display child.vue.

Next, we go to router.js.

First, we import child.vue.

The we go to constant routes and find the element controlling component one.

We add a new property: children.

Its value is an array as well. Each array element is an object.

Each object is a routing rule.

Here, we set path to child and component to child. And that’s it.

We can display child inside component one by adding child to the URL.

Using nested router, we can display one component inside another. What if we want to display two components side by side?

For example, we do not want to display child inside component one, we want to display it under component one.

In this case, the best solution is named router view.

In simple words, named router view means router view tag with the name attribute.

We will still work on component one.

First, we remove the children property.

Then we switch component into components.

Attention here, this time, we are using components. Plural.

The value of components is an object.

Before we set this object, we need to go to the app dot vue file first.

We make a copy of the router view tag.

In the second router view tag, we add the name attribute and set its value to child. You can also pick other names.

Then we go back to the router dot js file.

In components, we first install default and set its value to constant. This means the first router view tag will display component one.

Then we install child as property name and set its value to the child constant.

This means the second router view tag child will display the child component.

Now, the /component_one path can display two components side by side.

Check out our FULL VueJS course on Udemy:

https://www.udemy.com/vuejs-for-students-with-zero-es6-foundation/?couponCode=MEDIUM_PROMO_1