Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Ever built a website? Did it have more than one page?

If it did, you learned quickly how essential routing is to the success of your project. And in so many frameworks routing is a painful and complex thing to learn.

But not in Vue!

Vue has an incredibly clean and powerful library called vue-router that takes care of everything you could need.

In this course, we'll cover what you need to know to get started with vue-router.

This lesson goes through vue-router setup from npm install, through the boilerplate code needed to create a router.

Additionally, it creates a single route record for the home page.

Set up Vue-Router and add the Root Application Route

a-journey-with-vue-router-resources-cheatsheet

Cheat sheets

a-journey-with-vue-router-resources-sketchnote

Sketch Notes

We can create routes with other URL paths. It's important to know that the router will navigate to the first matching path it finds in the route record array. So matching paths will be ignored once the first match is found.

Create Routes in Vue and Understand the Path Hierarchy

In this lesson we'll create a route with an id parameter. We'll show three ways to access that id: through the template, through JavaScript, and through props.

Access Route Parameters in a Vue Component

We can create subroutes in any view using "children" as our key. We can set the URL to be appended, overriding, or default. Additionally, if we want to render multiple components at once, we can use named routes.

Create Subroutes Displaying One or More Vue Components with the children Key

We can use the "*" symbol to catch all matching paths. However, there are ways to do this that will override other paths. We want to avoid those.

Catch All Undefined Paths with a Wildcard Route in Vue

We can use the meta keyword to add and access information that's stored in our route records and passed to our components.

Add Metadata to Vue Routes

Using the beforeEach navigation guard we can set up logic to check for whether authentication is required to access a page. If it is, and the user is unauthenticated, we can route them elsewhere.

Block Unauthenticated Access to Pages with Vue Router Navigation Guards

We can navigate programmatically using functions in JavaScript. We can use explicit paths, or pass params and use a route name. 

Programmatically Navigate to Routes with Vue Component Methods

Vue-router comes with a built-in router-link component that can be used for navigation links between pages.

Use Vue Router-Link to Navigate within Components

Main.js gets cluttered quickly with all of the routes we've defined. We can break out the router into a separate file, and further break out individual chunks of route records if we want.

A Journey with Vue-Router

Laurie Barth

What you'll learn:

Prerequisites:

Course Content