- [Instructor] So now that we've got
all our pages in the navigation bar
working like we want them to, there's another thing
that we probably want our application to have.
And that's a so called 404 Page.
Currently, if the user goes to either a route
that we don't have a corresponding component for,
or a Product Detail Page
that we don't have a matching product for
the vue router just shows a blank page for it.
So for example, if we just go to /
and then just type keys, it just won't show any page
because there's no matching page for this route.
And similarly, if we go to /products/something like that,
it'll do the same thing,
since we don't have a corresponding product
to display on the product page.
So generally, what we want to do in these situations
is have a Not Found or 404 Page that tells the user
that they're trying to access a route that doesn't exist.
So here's how we do that in vue,
the first thing we need to do, obviously,
is define a component for this page that we want to display.
So inside of our vues folder, here,
let's create a new file.
And we'll call that NotFoundPage.vue.
And just like our other components,
this component is going to have a template,
which in our case is going to be very simple,
it's just going to be an h1 tag that says 404 Page Not Found.
And under that, we're going to have a script tag,
where we're just going to say export default,
name: NotFoundPage.
Simple enough, close that script tag.
And last but not least,
under here, we're just going to have a very simple
scope to style, we don't need to copy and paste this,
we can just type it out.
All we're going to do is just display our h1 heading,
aligned center.
Oops, and that should be style not styled.
That looks better.
So now to make this page display,
when none of our other routes matches a page,
what we have to do is open up our routes index js file,
that's going to be right in here, router index.js.
And what we're going to do is add another object
to the routes array as the last entry.
So what we're going to do here, is we're going to say path,
and the path here is just going to be a star like that.
And for the component, we're going to say, NotFoundPage.
And of course, we have to actually import that,
which we'll do up here, we're going to say import NotFoundPage,
from ../vue/ NotFoundPage.vue.
Okay, and now if we go back to our app,
and try and visit a route that doesn't exist, such as that,
we'll get this nice 404 Page Not Found message.
So this works for all of our major pages.
But what about when we try and go to the Product Detail Page
with a product ID that doesn't exist?
For example, what if we go to products/, blah, blah, blah?
Well, if we try that,
we'll see that it's still just displays a blank page.
So what we need to do is figure out a way to display
our Not Found Page component when a product isn't found
for the ID in the URL parameter.
So here's what that's going to look like.
What we're going to do, is open up
our Product Detail Page, just like that.
And then what we're going to do
is we're going to use a new directive,
just like our v-4 and V-bind directives called v-if,
which basically will display an element
only if the condition we passed to it is true.
And in this case, what we want to do is for our page here,
for our outermost div, our page wrap,
what we want to do is add a v-if directory
that says v-if=.
And basically what this will do is if a product exists,
this will be taken as truthy,
and it'll display this div and everything inside it.
And then what we want to do is, if that's not true,
we want to display the Not Found Page that we just created.
And the way that we do that
is down here outside our outermost div.
We're going to say NotFoundPage,
and we're going to use a very similar directive to v-if
called v-else, which will basically display
something only if the preceding v-if statement is false.
So basically, if product doesn't exist,
then it's going to display our Not Found Page.
And because we want to display our Not Found Page
on our product detail page, now
what we have to do is import it,
which we can do by saying import NotFoundPage
from ./NotFoundPage and we need to pass a component property
to our default export object here.
We'll say NotFoundPage,
make sure to put commas and now that should work.
So if we go back here
and go to a product page that doesn't exist,
we should see 404 Page Not Found.
Just like when we try and go
to some other route that doesn't exist.