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

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

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.

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

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.

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.

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.

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

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.

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.

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.

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.

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

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.

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.

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.

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.

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

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.

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,

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,

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.

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

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.

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,

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.

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

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.