• 15 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 4/13/21

Manage Navigation With Vue Router

Log in or subscribe for free to enjoy all this course has to offer!

Routing in Single-Page Applications

As you might have noticed, the term single-page applications (SPAs) indicates that a single page is loaded, which is then dynamically updated according to a set of requirements. And while this is powerful technologically speaking, the major flaw with this is that users still need different URLs to distinguish one page from another. Otherwise, whenever a user tries to return to a previous spot in their search history, they will always get the same page!

To address this problem, all major frameworks have a routing solution. Vue's recommended solution is the Vue Router library:

Installing Vue Router

To add Vue Router to our existing application, use the Vue CLI:

vue add router

Once it is complete, you should see that the CLI has changed a number of files to make sure everything is working correctly. If you open up your  main.js  file, you will see that Vue CLI has automatically configured the router property by attaching it to your Vue instance. In addition, there is a new file that is critical to understanding routing:  router/index.js.

Anatomy of Router

When you open up  router/index.js  in your code editor, you should see something like this:

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
}
]
})

The key part to focus on in this file is that the routes of our Vue app are defined via an array that contains objects. Each route object contains three key properties:

  • Path - what URL should match to the component.

  • Name - what this route should be named for labeling and debugging purposes.

  • Component - the component that should be displayed when the path is matched.

How Vue Router Works

There are two components that Vue Router uses which you should become familiar with:

  • <router-view></router-view>  - defines the area where the component we define in each route will appear on the page. This is important especially if you are nesting views.

  • <router-link></router-link>  - is similar to the anchor tag in HTML in that it also enables user navigation in the app. However, it is preferable to a standard anchor tag because it comes with built-in features, such as preventing automatic reloading of the page.

These two components form the foundation of using Vue Router in our components to help facilitate navigation within a Vue app.

Dynamic Route Matching

There will be times when you need to match a pattern of URLs to a specific page. For example, you want individual pages for menu items, but only want to use a single  ItemDetail.vue  page to show the details of the item; you would need the route to dynamically pass that information along. Vue Router solves this problem by allowing for dynamic route matching.

In the directory example, you would want to configure your route to look something like this:

const router = new VueRouter({
routes: [
// dynamic segments start with a colon
{ path: '/item/:name', component: ItemDetail }
]
})

This allows the component  ItemDetail  to then pull down the params for use:

<div>Item: {{ $route.params.name }}</div>

As a result, when you visit the URL:  http://localhost:8080/item/crossiant, the page will render:

<div>Item: crossiant</div>

That was easy!

Exercise

You will find the source code for the exercises in the course's GitHub repo in the  cafe-with-a-vue folder. To get started, check out the  P2C3-Begin  branch.

Instructions

  1. Temporarily save contents of  App.vue  in a separate file because this will be overwritten by the installation

  2. Add  vue-router  plugin to app and do not enable history mode during setup

  3. Migrate temporarily saved data from old  App.vue  to  Home.vue 

  4. Create static route for contact page at  /contact 

  5. Migrate contact information from  Home.vue  to  Contact.vue

  6. Add contact router link to  App.vue

  7. Enable history mode in your router config

Let's Recap!

Congratulations! Routing can a bit tricky to get started with, but you now have the ability to:

  • Install Vue Router on your Vue CLI app with no history mode.

  • Configure routes.

  • Use  router-view  and  router-link  to manage routing.

  • Utilize dynamic route matching to account for custom pages.

Now that you can control how your user gets routed through your app, it's time to learn how to control when your code is run during page load. See you in the next chapter!

Example of certificate of achievement
Example of certificate of achievement