Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Load Data from URL Params in Vue.js and Nuxt.js

    John LindquistJohn Lindquist

    URLs often reflect some bit of data that the page should load. This lesson walks you through adding a custom URL Param to the router then forwarding that Param to load data onto the page.

    vueVue.js
    nuxtNuxt.js
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 On the user page if I want to add a param like /1, which currently gives me a 404, if I go into my router and my nextConfig, if I say slash and then colon and the name of the param or the name I want to give it. Then when I refresh my inaudible back to working and if I want to display this ID in my user view I can actually just say $route.params.id.

    00:23 Let's save here, I'll refresh, and you'll see this tiny little 1 right here. If I put in /100 instead you'll now see this 100. That means now in my index I can create router links for each person and people, so I'll do that by deleting my unordered list, create a div, before person and people, and then create a router link where I navigate to /user/100 and I'll say person.name. If I go to the home page you'll see all these router links on my page.

    01:03 I'm going to ditch all of this styling so just go into the main CSS in your Assets folder from the template and select and delete all the anchor stuff. Hit Save and now these'll just look like regular links, where if I click on one of them it'll go to user/100 and you'll see the number 100. Every one I click on will go to user 100.

    01:23 What I can do to make this go to the person or the person ID...right now this is just a string. If I want to evaluate it, so I'll put a colon in front of the 2, which informs this side to evaluate, so now I want user to be a string. Then I want to concatenate the person.ID.

    01:44 It will evaluate that, I'll go back to the home page, I'll click on Luke, I'll see 1. I'll go back to Home, click on C-3PO, I'll see 2. Back to Home, click on Akbar, and you'll see 27.

    01:58 Now you can actually combine that ID with this similar loading script for my main page. I'll just drop this into my user page as well. Instead of getting all the people this time -- so right now it's /people -- I want to get all the people plus /theparams.id.

    02:19 Now, you're probably wondering where I get the params from and that's actually passed in into my data on an object which I'll deconstruct, say params. I get my params off of that object passed in and then the response that comes back will have some data on it, which I want to call person this time.

    02:39 Now instead of route.params.id I'll delete all of that and instead of Can'tFindMe I'll have person.name. When I hit Save here, and I go Home, and I click on Luke, you'll see Luke Skywalker as it's requesting Luke from the API from people/1.

    03:00 If I go back, click on Obi-Wan, I'll load Obi-Wan. You'll see we're on user 10 in the URL and I can even refresh in the URL and this 10 we passed in into my params, and then again I make that request and load that ID.

    Discuss

    Discuss