Use Template Literals with router-link to Create Dynamic Routes in Vue 3
Template literals give you a convenient way to handle routing with dynamic data. In this lesson, we use a template literal on router-link's :to property.
Instructor: [0:00] I want to be able to click on each of these crafts, and go to a page which is just for those. That would be /craft/ID. Let's go to our component. We're going to change our P tag to be our router link. We want to bind our router links to value to template literal, that is craft/craft/ and then this current-crafts ID.
[0:25] Now if we go back to our application, we can see these have all turned into links. If we click on them, we can see the ID is appearing in the URL, and it's appearing back there. The styling's a bit off, so let me just fix that. I'll take anchor tags and I'll say, text-decoration, it's what's controlling the underline, I'm going to say, none. We know underline's nine, and I'll set color back to black again.
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!