Access Route Parameters in a Vue Component
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.
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.