Nuxt3 入门篇 — 页面路由 （一）

前一篇讲到我们如何搭建一个nuxt3的项目，今天我们来实现怎样在nuxt3中使用页面的路由。

约定路由

由于nuxt集成了vue-router并且约定：如果在项目的根目录下创建一个名为pages文件夹nuxt将会自动生成相应的路由。访问的路劲就是文件的路劲。

例如：

文件名	生成的路由
index.vue	/
test.vue	/test

NuxtPage

相当于vue-router中的route-view

案例

首先我们在app.vue加入<NuxtPage></NuxtPage>这是路由的入口

<template>
  <div>
    <NuxtPage></NuxtPage>
  </div>
</template>

在根目录新建pages文件夹，并在pages文件夹下新建一个index.vue文件

<template>
  <div>
    <h1>Hello Nuxt3</h1>
  </div>
</template>

目录结构如下

由于文件名为index.vue，为默认的页面所以直接在浏览器输入http://localhost:3000 访问

NuxtLink

相当于vue-router中的route-link（用于路由的链接）

案例

在app.vue新增

<template>
  <div>
    <NuxtLink to="/test">test</NuxtLink> |  <!--  新增 -->
    <NuxtLink to="/">根</NuxtLink>  <!--新增 -->
    <NuxtPage></NuxtPage>
  </div>
</template>

在pages下新增test.vue

<template>
  <h1>
    test
  </h1>
</template>

点击切换即可

根目录	test

预告

关于nuxt3路由的基本使用已经掌握了，下一篇关于动态路由、父子路由的嵌套我们再慢慢细谈。