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 use the meta keyword to add and access information that's stored in our route records and passed to our components.

Instructor: [0:00] We're going to add more information for our route records to carry. We'll use the meta keyword and set a new object which will include requiresAuth is false. We can take this same information and add it to another route. In this case, we'll add it to Egghead, but we'll set requiresAuth to true.

[0:28] If we navigate to our home component, we'll see that we can access this information in the component itself. This will be similar to the way that we access params. In the template, we'll use this .route.meta.requiresAuth. If we refresh our page and navigate to home, we'll see that it shows up on our Vue.

[1:02] Alternatively, we can access this through JavaScript. As before, with our params, we'll create a function that will return the same information that we put in our template. Now, we'll access that information using the function name, and that's it.

Course

A Journey with Vue-Router

Add Metadata to Vue Routes

Share this video with your friends