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

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.

Instructor: [00:01] Begin by installing vue-router using npm. We'll use the save flag to automatically add it to our package.json.

[00:12] Now, we'll run our Vue application using the command npm run serve. As we can see, our application is running.

[00:33] In our main.js file, we're going to import VueRouter from 'vue-router.' Next, we'll add 'vue-router to our Vue application with the Vue.use function. We'll create an array of routes that we'll leave empty for the moment.

[00:56] We'll create a new router as an instance of vue-router. In it, we'll add our routes array and we'll set the mode to history. Finally, we'll add our router to our Vue application. In order to see our routing, we need to use the <router-vue> tag which will act as the window in which all of our route components appear.

[01:32] We'll start by creating a route record, which is an object. It requires a path and a component. In this case, we'll set our path to / and we'll use our home component, which we need to import from a pre-existing component page that we've already created.

[01:58] When we refresh, we see that our / path navigates us to our home page, which appears inside the window of the <router-vue> tag we added to our app.vue file.

Course

A Journey with Vue-Router

Set up Vue-Router and add the Root Application Route

Share this video with your friends