03. Nuxt3页面和约定路由的使用

通过前面两节的学习，我们已经知道了Nuxt3的基本目录结构和HelloWorld的写法了。本节开始，我们学习一下如何新建一个页面以及如何通过超链接的形式到达这个页面。

Nuxt3创建页面

Nuxt3的一个特点就是约定式开发，讲究的是约定大于配置。就是你的开发模式都是事先说好的，你用Nuxt3就要遵守Nuxt3的规则一样，框架都已经为你做好各种配置了，你只要遵守规则就可以了。 当你了解什么是“约定式开发”后，再来看如何创建一个Nuxt3的页面。我们按照框架约定新建一个pages 的文件夹，然后新建一个文件Demo1.vue 。注意，上面这两个步骤，就是约定开发，你必须这么作，否则框架就不认为你是一个页面。

VSCode自定义代码片段

这里再分享一个小技巧，比如每次新建一个页面，都会有很多相同的代码，这时候就可以使用VSCode的用户代码片段 功能。这个功能可以在VSCode界面的左下角的齿轮图标中找到。 找到后新建一个Nuxt的片段就可以了。这个一般根据自己的需要进行编写，如果你是新手，没有太多的 配置，直接复制下面我的也是可以使用的。

{
  "nuxt":{
    "prefix":"nuxt",
    "body":[
        "<template>",
            "  <div class=\"\"></div>",
        "</template>",
        "",
        "<script setup>",
        "import {} from 'vue'",
        "</script>",
        "",
        "<style scoped></style>",
    ],
    "description":"nuxt3 Components"
  }
}

新建好之后，我们再次回到VSCode中的Demo1.vue页面，直接输入 nuxt 回车后，就会生成一段代码了。

建议大家在工作中巧用这个功能，从而可以大大加快你的开发效率。

新的页面建好了，再补充一下页面内容。

<template>
  <div class=""><h1>Demo01</h1></div>
</template>

这样一个页面就建立好了。

约定路由

当一个页面建立好以后，如何能访问到我们新建的这个页面呢? 既然是约定开发，肯定是有一个约定的。 首先第一步，我们需要在项目根目录下的app.vue文件中，使用 <Nuxtpage> 标签，这就相当于路由的出口了。

<template>
  <div>
    <hello-world />
    <NuxtPage></NuxtPage>
  </div>
</template>

比如我们现在这个页面，想要访问到，就可以在地址栏输入下面的地址就可以了。

http://localhost:3000/demo1

但是如果你使用原来的http://localhost:3000去访问，会显示404，这时候你可以新建一个 index.vue 页面。

<template>
  <div class=""><h1>Index Page</h1></div>
</template>

<script setup>
import {} from "vue";
</script>

<style scoped></style>

这时候在访问http://localhost:3000就可以访问到页面了。

NuxtLink标签的使用

Nuxt框架不鼓励我们使用<a> 标签进行跳转，而是使用<NuxtLink></NuxtLink>标签进行跳转。比如我们要从 index.vue页面跳转到demo1.vue页面，就可以使用下面的代码进行跳转。

<template>
  <div class="">
    <h1>Index Page</h1>
    <NuxtLink to="/demo1">Demo1.vue</NuxtLink>
  </div>
</template>

这个页面写完后，可以到浏览器中预览一下效果。基本就可以看到NuxtLink标签的作用了。

总结

本文我们学习了三个知识，我们进行总结一下：

1. Nuxt3是约定大于配置的开发；
2. VSCode 自定义用户代码片段的方法；
3. 约定路由和<NuxtLink>标签的使用方法。

下节我们学习一下Nuxt3的动态路由的相关知识。