Set up Vue-Router and add the Root Application Route

Create Routes in Vue and Understand the Path Hierarchy

Access Route Parameters in a Vue Component

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

Catch All Undefined Paths with a Wildcard Route in Vue

Add Metadata to Vue Routes

Block Unauthenticated Access to Pages with Vue Router Navigation Guards

Programmatically Navigate to Routes with Vue Component Methods

Use Vue Router-Link to Navigate within Components

Refactor Your Router and Route Definitions into Separate Files

A Journey with Vue-Router

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.

Instructor: [00:01] We'll start by importing two new page components, egghead and blog. Next, we'll make a new route record, which is an object. We'll set our path to /blog and set our component to blog. We'll also make a route record for our egghead component, but we're going to set our path to /blog.

[00:52] When we do this, and navigate to /blog, we'll find that we see the blog component and not the egghead component. With matching routes, the first route record in the hierarchy wins. Now, we'll change our path to /egghead, and we'll be able to navigate to our egghead route, which shows our egghead component.

Course

A Journey with Vue-Router

Create Routes in Vue and Understand the Path Hierarchy

Share this video with your friends