路由系统

路由渲染

pages 目录下的 .vue 文件会自动注册为路由组件。

另外两个常用的路由组件可类比于 Vue Router：

• 页面路由：<NuxtPage> -> <RouterView>

pages/
  user/index.vue // user/
  user/[id].vue // user/:id
  ...

路由导航

声明式导航

• 页面跳转：<NuxtLink> -> <RouterLink>

路由跳转属于服务端还是客户端？

• 当通过 <NuxtLink> 直接跳转时，此时为客户端渲染。
• 当直接在浏览器地址栏输入路由地址并访问时，此时为服务端渲染。

编程式导航

navigateTo('/about')

中间件

可以看作“导航守卫”

middleware 目录中

使用中间件：

definePageMeta({
  middleware: [
    function (to, from) {
      // Custom inline middleware
    },
    'auth',
  ],
})

命名为 xxx.global.ts 的文件会被自动注册为全局中间件。

-| middleware/
---| analytics.global.ts
---| setup.global.ts
---| auth.ts

执行顺序为：

1. analytics.global.ts
2. setup.global.ts
3. Custom inline middleware
4. auth.ts