--- theme: channing-cyan --- [前一篇](https://juejin.cn/post/7038887874950873124)讲到我们如何搭建一个nuxt3的项目，今天我们来实现怎样在nuxt3中使用页面的路由。 ## 约定路由由于nuxt集成了vue-router并且约定：如果在项目的根目录下创建一个名为`pages`文件夹nuxt将会自动生成相应的路由。访问的路劲就是文件的路劲。例如： | 文件名 | 生成的路由 | | --- | --- | | index.vue | / | | test.vue | /test | ## NuxtPage 相当于vue-router中的route-view ### 案例首先我们在`app.vue`加入``这是路由的入口 ```vue ``` 在根目录新建`pages`文件夹，并在`pages`文件夹下新建一个`index.vue`文件 ```vue ``` 目录结构如下 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1948592fdcba44a6b8b22baa2ebb32d8~tplv-k3u1fbpfcp-watermark.image?) 由于文件名为index.vue，为默认的页面所以直接在浏览器输入http://localhost:3000 访问 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f1bd567216324533861dbfa56e1ec18c~tplv-k3u1fbpfcp-watermark.image?) ## NuxtLink 相当于vue-router中的route-link（用于路由的链接） ### 案例在`app.vue`新增 ```vue ``` 在`pages`下新增`test.vue` ```html ``` 点击切换即可 | 根目录 | test | | --- | --- | | ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f886ef45081646baadbd4a5c36af7170~tplv-k3u1fbpfcp-watermark.image?) | ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a859858dd0a94e358f45f6503fc77cb4~tplv-k3u1fbpfcp-watermark.image?) | ## 预告关于nuxt3路由的基本使用已经掌握了，下一篇关于`动态路由`、`父子路由的嵌套`我们再慢慢细谈。

Hello Nuxt3

test