Defining Wildcard Routes 0:00Often, you'll need to construct a route that accepts a wildcard value. For example, let's say you are viewing some post. Well, this value needs to be unique. It could be the ID of the post, or it could be a unique slug of the post. So in these cases, we can use what we call a wildcard. Like this. I'll wrap it within curly braces. And now we're saying matchPosts slash anything. And in response, we'll return a Vue, and I've created one called post. Okay.And in response, we'll return a Vue, and I've created one called post. Okay. So now, if I visit post slash anything, we load that route. It could be a number. It could be a string. It could be, again, the slug. Whatever you want. Now, how do we grab that value? Because often, you'll need to fetch it in order to perform, for example, a database query. Capturing Route Parameters 0:50Because often, you'll need to fetch it in order to perform, for example, a database query. All right. While we called it post, let's accept it in the closure here. Like we did a couple episodes ago, let's return that value directly, and if I give it a refresh, we have captured it. As you see there. Now, we haven't yet reviewed databases. So let's create a simple lookup. Great. Loading View With Data 1:11So let's create a simple lookup. Great. So now we have what you might call a data store. Let's next return a Vue called post, and we're going to pass some data to it. I want a variable called post, and that will be equal to whatever value is associated with that slug. So we'll pass our array and then the key from the URI. Finally, if I visit that Vue, we don't have any titles here. So we'll say my blog post, but then within a paragraph tag, I can echo out the post itself. Very, very simple to get the point across.So we'll say my blog post, but then within a paragraph tag, I can echo out the post itself. Very, very simple to get the point across. So if we come back and we look for my first post, there we go. Hello, this is my first blog post. Let's do second, and that one works as well. But now let's try one that doesn't exist. This is going to blow up, isn't it? Yep, undefined index. And that's because we didn't do any checking up front. So we're trying to access a key from this array that does not exist. Handling Missing Posts 2:05And that's because we didn't do any checking up front. So we're trying to access a key from this array that does not exist. Now, we can handle this in a number of ways. We could provide a default. I wouldn't recommend this, but it's an option. So if we don't have anything for that key, the post will be nothing here yet. Eh, don't love it. But sure enough, that would work. But instead, if you try to access a post that doesn't exist, we should show a 404 page. Let's do that here.But instead, if you try to access a post that doesn't exist, we should show a 404 page. Let's do that here. If not, array key exists. The key is post. The array is post. If that doesn't exist, we'll call Laravel's abort function. We want a status code of 404, not found. And we'll say, sorry, that post was not found. Okay, so now if I come back and refresh, we get Laravel's 404 page. However, the others will still work, as you see there. Recapping the Workflow 2:52Okay, so now if I come back and refresh, we get Laravel's 404 page. However, the others will still work, as you see there. Now before finishing up, let's break down what we did here. We updated our route to accept a wildcard. That wildcard is then available in our callback function here, or the closure. Next, to simulate a database, I set up an associative array. A slug points to a very short blog post. Next, we check. If the wildcard from that URI does not exist in our little data store here, well, sorry, 404 page, not found.If the wildcard from that URI does not exist in our little data store here, well, sorry, 404 page, not found. Otherwise, if it was found, we will load a view called post, and we will pass the value associated with that slug. Finally, within the view, we simply echo it out.
