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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!