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 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.

Instructor: [00:03] We're going to start by importing a new component called guest post that will act as a sub-component on our page. In order to add a sum component to routing, we need to use the key children that takes an array.

[00:22] Inside the array, we'll make an object, which is a new route record. This pattern follows the same one that we use for our parent routes array. We'll set the path to guest and the component to guest post. However, we won't see anything.

[00:42] That's because inside blog, we need a router view tag that will act as a mapping to the sub navigation that we've created. However, if we refresh the page, we still won't see anything. That's because our path is set to guest. We need to append guest to the URL.

[01:08] Alternatively, we can set our path to /guest. That means that we can access the sub navigation directly using guest instead of blog/id/guest. If we remove the path entirely and go back to blog/id, we will always see a component rendered in our sub navigation by default.

[01:38] We also have the ability to use multiple sub navigation components at the same time. We'll add another router view and set the name to second. If we go back to our navigation, we have to change our route record to render components instead of component. Components is a key and the value is an object.

[02:07] The first component that we want to render is default in our unnamed component. We'll set that to guest post. The second is using the term second because that's what we've set as our name. Now we see both sub navigations.

[02:27] If we to go to the first router view and give that a name as well, we no longer have the term default. We'll replace that with the key first. There we have it, we now have sub navigation.

Course

A Journey with Vue-Router

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

Share this video with your friends