Name: Load Data from URL Params in Vue.js and Nuxt.js
Uploaded: 2016-12-08T16:37:54-06:00
Description: 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.

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.

https://app.egghead.io/api/v1/lessons/vue-load-data-from-url-params-in-vue-js-and-nuxt-js/subtitles

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

[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.

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

Share this video with your friends