This episode is for members only

Sign up to access "Getting Started with Nuxt 3" right now.

Get started
Already a member? Sign in to continue
Playing
04. Linking to pages

Transcript

00:00
Let's take a look at linking two pages. Of course, that's really important in any app. What we're going to do is create a navigation at the top of our home page, or in fact,
00:09
at the top of every single page. And we're going to be able to link through to the slash to-dos page that we've created. I'm going to go ahead and get rid of this create file
00:19
just here, just so we've got a to-dos index. And let's head over to app.view and create a navigation at the top of here. Now, we're going to look at components a little bit later.
00:28
So we'll make this a little bit tidier. But for now, let's just create a simple unordered list just to keep things really simple. And this will have a list item inside of it
00:37
with an anchor through to the create to-do page, or the to-do index page. Now, normally within an app, of course, what we would do is create an anchor.
00:46
And then we would link it through to the page that we wanted. Let's just see that now. So let's create to-dos.
00:52
And let's just say to-dos. Let's go back over. And of course, we can click through onto this to get to this page.
00:58
Let's go back over and try that from here. Now, technically, what has happened with that anchor is we're now refreshing the page. That's not what we want, because really, we
01:06
have a single-page application. Instead, what we do is use a Nuxt link component, which we can end here. And we have a very similar way of linking through.
01:16
Instead, what we do is we bind in a prop, which allows us to provide an object through to the location. Now, this is where root naming comes in, which we'll dive into a little bit deeper.
01:28
So let's just say that we wanted to find the name out as to-dos. This is what has been registered when we created this to-dos index page. This index file is now called to-dos.
01:38
We'll look at a more complex example in a minute. But just let's go over and see this in action first. So I'm over on the home page. I'm going to go ahead and click to-dos.
01:47
And without technically refreshing the entire page, this is now linked through to the right location. So we're pretty much on track to link things up. Let's go ahead and create another link or list item
01:58
just in here. And that's going to go through to the home page. Now, what would this be called? Well, it's just called index.
02:03
That's the index file that we created out in here. Let's go back over, give this a refresh, click on to-dos, click on home. And you can see that we can now navigate between each one.
02:13
So that's working nicely. Let's go back to our create example and just create out a create.view file inside of here. We'll go ahead and create a template out for this.
02:21
Again, to-dos create. And if we wanted to link from pretty much anywhere, so we could link from the to-dos page here over to the create page, let's try this out.
02:32
So we'll figure out the naming of this in a second. So let's say to, and let's provide in the name here. And that's going to be to-dos hyphen and create. So any route that we create that's kind of sub
02:45
with a different name other than index is going to have a hyphen in there. Now, when we look at parameters, these are slightly different.
02:54
So we'll look at the convention for that in a moment. But now that we're going into the create directory, we're just going to separate this with a hyphen. So if we come over to the homepage,
03:03
we can link through to to-dos. And if we just go and rerun npm run dev to bring that in and actually go and supply a create to-do label for this link, then when we click through to this,
03:17
you can see we're now through to the to-dos create page. So that's pretty much 90% of what you need to know to start linking through to other pages. There are a couple of shortcuts you can use for this.
03:29
So for example, with a Nuxt link, we could actually say to, and we wouldn't necessarily have to bind in an object here. We could say forward slash to-dos
03:40
forward slash create if you wanted to. Let's head over and see what happens. So let's go over to the to-dos page, hit create to-do.
03:48
And this technically, again, has not refreshed, but it's still linking us through to the right place. I much prefer using the name here explicitly. So that's what we're going to be using throughout the series,
03:59
but you can do either. Okay, we're going to go ahead and get rid of this example here because we've pretty much wrapped that up. And we're going to delete that create component.
04:06
So we're left with the two pages that we have here, to-dos and our homepage. And in the next episode, we're going to look at linking through to URLs
04:15
that have parameters. For example, if we wanted to view the first to-do by the index or ID one, let's see how we're going to do that.
18 episodes1 hr 15 mins

Overview

Nuxt is a framework built on Vue that makes development of applications a breeze. In this series, we'll get set up with a fresh project and work through everything you need to know to start building with Nuxt.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!