Name: Access Route Parameters in a Vue Component
Uploaded: 2019-11-07T03:56:40-06:00
Description: 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.

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

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.

https://app.egghead.io/api/v1/lessons/vue-js-access-route-parameters-in-a-vue-component/subtitles

Instructor: [00:02] We'll start by adding a parameter to our URL navigation, in this case, ID. We'll go to the component and access that parameter directly in the template using this.$route.params.id. If we append our URL with a /1234, that acts as the ID and it appears in our view.

[00:34] Alternatively, we can access this ID through a JavaScript function. We'll call it ID and return the same information as before. Now, we can access the ID using ID that corresponds to the function name. If we refresh, it's still in our view.

[00:59] Our final option is to head to the route record and set props to true. Now, our param is set as a prop that gets passed into our component. We can set props so that ID is the keyword that we're accessing. Using the same template property, we can refresh.

[01:24] We'll see 1234 appear as our ID on our page. These are three different ways to accomplish the same thing.

Access Route Parameters in a Vue Component

Share this video with your friends

Course

A Journey with Vue-Router