Nuxt3 路由、页面、组件

2、路由、页面、组件

nuxt3约定式路由，不需要配置路由，在根目录pages下创建业务页面即可访问。

pages 用于编写业务组件，页面名称就是路由名称

components 组件文件夹，用于存放各类组件

访问 http://localhost:3000/about 展示about页面内容

访问 http://localhost:3000 展示index页面内容

2.1 简单页面

为了能让我们编写的业务页面可以正常访问，首先要将app.vue中<NuxtWelcome />组件替换成<NuxtPage/>

在pages/index.vue文件

<template>

    <div>

        this is index page,Index pages has a components named hello

        <Hello />

    </div>

</template>

<script setup>

import Hello from '../components/Hello.vue'

</script>

<style scoped>

</style>

我们看到index.vue页面中引入了组件Hello，components/Hello.vue

<template>

    <h1>Hello nuxt3</h1>

</template>

2.2 动态路由

Nuxt routing is based on vue-router and generates the routes from every component created in the pages/ directory, based on their filename.

nuxt路由基于vue-router，并根据pages/目录中创建的每个组件的文件名生成路由。

This file system routing uses naming conventions to create dynamic and nested routes:

这个文件系统路由使用命名约定来创建动态和嵌套路由:

业务场景：用一个用户详情页面，但是不同的用户详情页结构相同，内容不同，大多数是以id进行区分，那么此时我们就可以以动态路由的形式来标记这个最新的页面

<template>

    <div>

        这是 {{ id }} 号用户的详情

    </div>

</template>

<script setup>

const route = useRoute();

const id = route?.params?.id || 0

</script>

之后再访问：

就可以看到我们想要的结果啦~

2.3 Navigation 导航

页面中的跳转，可以通过组件NuxtLink（无需引入）进行跳转，to跳转路径

<ul>

     <li>

         <NuxtLink to="/detail/1">用户1详情</NuxtLink>

    </li>

    <li>

         <NuxtLink to="/detail/2">用户2详情</NuxtLink>

    </li>

    <li>

<NuxtLink to="/about">关于</NuxtLink>

    </li>

</ul>

2.4 useRoute

在script setup中，我们可以通过useRoute方式获取当前页面的route信息，如query信息、params信息

例如：当我们访问 http://localhost:3000/detail/1?name=%E5%93%88%E5%B0%94%E6%BB%A8%E5%A4%A7%E7%8C%A9%E7%8C%A9页面信息时

detail页面获取路由相关信息并在页面上进行展示：

<template>

    <div>

        这是 {{ id }} 号用户的详情

        名为 {{ name }}

    </div>

</template>

<script setup>

const route = useRoute();

const id = route?.params?.id || 0

const name = route?.query?.name || 'z'

</script>

最终展示效果：

2.5 Route Middleware 路由中间件

nuxt提供了一个可定制的路由中间件框架，您可以在整个应用程序中使用它，非常适合在导航到特定路由之前提取想要运行的代码。

有三种类型的路由中间件:

匿名(或内联)路由中间件，直接在使用它们的页面中定义。

命名路由中间件，放在middleware目录中，在页面上使用时将通过异步导入自动加载。(注意:路由中间件名称被标准化为kebab-case，所以someMiddleware变成了some-middleware。)

全局路由中间件，它位于middleware目录中(后缀为. Global)，将在每次路由更改时自动运行。

2.5.1 匿名(内联)路由中间件

2.5.2 命名路由中间件

使用示例：

定义匿名中间件 middleware/auth.js

// 匿名 defineNuxtRouteMiddleware定义nuxt route 中间件

export default defineNuxtRouteMiddleware((to, from) => {

    console.log(to, from, '中间件跳转过程中to和from所代表的含义有何不同')

    if(!Number(to.params.id)) {

        return navigateTo('/login')

    } else if(Number(to.params.id) === 3) {

        return abortNavigation()

    }

})

在对应业务页面中引入中间件auth

definePageMeta({

    middleware: ['auth'], 

    // middleware: 'auth', 

})

若跳转过程中不满足中间件所提供的条件，可以通过navigateTo跳转至指定页面，例如：login.vue

<template>

    <div>

        <div>

            <span>账号：</span><input type="text">

            <span>密码：</span><input type="password">

        </div>

        <button>登录</button>

    </div>

</template>

navigateTo (to: RouteLocationRaw | undefined | null, options?: { replace: boolean, redirectCode: number, external: boolean) 可以根据对应options，重定向到指定路由，也可以直接调用来完成页面的跳转。

abortNavigation (err?: string | Error) 直接终止跳转，并可以返回一些错误信息

2.5.3 全局路由中间件

全局路由中间件无需刻意引入，只要在定义中间件的文件上加入global，即可在全局使用。

定义全局路由中间件 middleware/auth.global.js

// 匿名 defineNuxtRouteMiddleware定义nuxt route 中间件

export default defineNuxtRouteMiddleware((to, from) => {

    if(to.fullPath.includes('detail') && !Number(to.params.id)) {

        return navigateTo('/login')

    } else if(Number(to.params.id) === 3) {

        return abortNavigation('Insufficient permissions.')

    } else {

        return true

    }

})

在访问页面时即可看到对应效果

2.5.4 中间件的返回值

无返回值：也就是说当前中间件不会阻塞路由跳转。

return navigateTo(‘/’) or return navigateTo({ path: ‘/’ })， 重定向到指定的路径，如何是在服务端的话，会设置 redirect code 为302

return navigateTo(‘/’, { redirectCode: 301 }), 重定向到指定的路径，如果直服务端的话，会设置 redirect code 为301 表示这个重定向的永久的。

return abortNavigation() 终止当前的跳转

return abortNavigation(error) 终止跳转并带有错误信息

2.5.6 动态添加中间件addRouteMiddleware

通过addRouteMiddleware()方法可以在代码中动态添加全局和命名路由中间件，例如可以在插件中