nuxt3路由(Routing)使用讲解

最新推荐文章于 2025-04-04 18:52:27 发布

showwaychen

最新推荐文章于 2025-04-04 18:52:27 发布

阅读量2.8k

点赞数

文章标签： javascript vue.js 前端

原文链接：https://tr.zhiyakeji.com/post/1673943459399

版权

nuxt3路由(Routing)使用讲解

基于文件系统的路由是nuxt一个核心特色。每一个在pages/目录下的vue文件，被会被框架创建一个对应的URL(也叫路由)。每个pages/目录下的vue文件就是一个页面。 Nuxt利用代码拆分方式为请求的路由提供最少的JavaScript。

页面

Nuxt路由底层实现是基于vue-router的，它会为每一个在pages/目录下的组件生成与文件名对应的路由。

# pages目录
pages/
--| about.vue
--| posts/
----| [id].vue

生成对应的路由配置文件

{
  "routes": [
    {
      "path": "/about",
      "component": "pages/about.vue"
    },
    {
      "path": "/posts/:id",
      "component": "pages/posts/[id].vue"
    }
  ]
}

此文件内容就是vue项目开发时配置路由的格式。

页面的跳转导航

<NuxtLink>组件就是用来进行页面之间的跳转导航的。此组件最终会渲染成一个带有href属性的<a>标签, href中设置的就是页面的路由。在客户端激活后，通过更新浏览器的URL来在JavaScript中执行页面的转换过渡。这样可以防止整个页面的刷新，并且可以允许页面切换的动画效果。

<NuxtLink>为了加快页面切换的速度，会在页面跳转之前预先获取所指向的下一个页面组件和payload(已生成的页面)。
示例:

<template>
  <header>
    <nav>
      <ul>
        <li><NuxtLink to="/about">About</NuxtLink></li>
        <li><NuxtLink to="/posts/1">Post 1</NuxtLink></li>
        <li><NuxtLink to="/posts/2">Post 2</NuxtLink></li>
      </ul>
    </nav>
  </header>
</template>

路由参数

我们可以在<script setup>块或者setup()方法中使用 useRoute()接口来获取当前的路由详情。

<script setup>
const route = useRoute()

// When accessing /posts/1, route.params.id will be 1
console.log(route.params.id)
</script>

路由中间件

Nuxt提供了一个可定制化的路由中间件框架，你可以在整个应用项目中使用。非常适合在你需要导航到指定路由的时候执行相关代码。
::: alertinfo
路由中间件是在nuxt应用中的vue部分运行的。尽管名字相同，但他们与服务端的中间件是完全不一样的。服务端中间件是运行的Nitro 服务中的。
:::

nuxt3中有三种路由中间件

匿名(或者叫内联)的中间件：在pages目录下的以文件名自动生成对应路由的功能，就是nuxt3框架内部自动生成一些中间件来实现这一机制的。
命名的路由中间件：放在项目的middleware目录下。此目录下的命名路由如果在page中使用，那nuxt3框架会自动加载此路由中间件。(注意，路由中间件名称会被统一成kebab-case格式，例如: someMiddleware 会变成 some-middleware)
全局的路由中间件: 放在项目根目录中的middleware目录下，并以.global为后缀。这种中间件会在每个路由切换的时候被执行。

示例：

// middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
  // isAuthenticated() is an example method verifying if a user is authenticated
  if (isAuthenticated() === false) {
    return navigateTo('/login')
  }
})

<!-- pages/dashboard.vue -->
<script setup>
definePageMeta({
  middleware: 'auth'
})
</script>

<template>
  <h1>Welcome to your dashboard</h1>
</template>

路由验证

Nuxt支持对路由的验证。通过在页面(page)中的definePageMeta中的validate属性来实现路由验证。

validate属性以route为参数。返回的boolean值就决定了当前路由是否会在此页面中渲染显示。如果你返回false,并且也没有其它路由匹配规则与之相匹配的话，就会导致404的错误。你也可以直接返回一个包含了statusCode/statusMessage的对象，来立即返回一个错误(这种情况下，其它路由匹配规则就不会判断了) 。

<!-- pages/post/[id].vue -->
<script setup>
definePageMeta({
  validate: async (route) => {
    const nuxtApp = useNuxtApp()
    // Check if the id is made up of digits
    return /^\d+$/.test(route.params.id)
  }
})
</script>