Get Started with Nuxt with Debbie O'Brien
Nuxt Routing and Links
Nuxt.js gives us automatic routing. In other words, all we have to do to have routing in our application is to create
vue files in the
pages folder. Let's create an about page. We can copy what is on our index page and paste it into the about page. Let's remove the buttons and change the text to About.
Now if we go to our browser you will see we have prettier errors. Ermm that's not good.
If you have added prettier and your editor isn't set up to fix prettier issues on save then you can open vs code settings. Search for on save and activate the Format on Save. Then every time we save the file it will auto fix our prettier issues.
OK let's see how routing works. In our browser, we can type slash about to get to our about page. Pretty cool right. So How is this working?
Remember in the last lesson I said the .nuxt directory is what Nuxt uses to build your application in dev mode. Well, let's have a look at what's inside.
Can you see we have a router.js file?
This is automatically created for us. Any time we create a new route it is automatically added here. You will also see that our pages are code split and the webpack chunk name is the name of your page.
If you are not familiar with how webpack works then don't worry because you don't have to. Nuxt does it all for you.
And that's it. mission complete. Hang on a second. We don't really want our users to have to type the page in the browser URL every time we want them to go to a new route.
To navigate between pages we use the
<NuxtLink> component. This component is included with Nuxt and works similar to the
<a> tag except that instead of using
href to link to the page we use
Let's add a NuxtLink in our about page that links to the home page. Remember home is the index page so we just need to use a slash to link to the index and not slash home. Let's also add a NuxtLink to our home page that links to the about page.
Let's check it out in the browser. Clicking the about link brings us to about page and the home link brings us to the home page. Much better. But hang on. My page doesn't seem to be code splitted now. it is loading the about page on the index page. What?
In the next lesson, let's take a look at dynamic routing.