路由

Nuxt3 路由配置与 Vue Router 3.0 基本一致，但有一些不同点

在 Nuxt3 中，路由配置文件是自动生成的，不需要手动配置

路由配置

在 pages 目录下新建路由文件，nuxt 会自动的引入所有文件生成路由配置，跳转的路径就是文件名称

├── pages
│   ├── index.vue
│   ├── list.vue

• 使用

const router = useRouter();
router.push("/");
router.push("/list");

嵌套路由

如果需要用到嵌套路由，则需创建一个与路由文件名称相同的文件夹,

如 home.vue 路由有嵌套路由，则创建一个同名的文件夹，在定义路由界面即可...

├── pages
│   ├── index.vue
│   ├── home
│   │   ├── index.vue
│   │   ├── list.vue

• 使用

const router = useRouter();
router.push("/home");
router.push("/home/list");

动态路由

文件以中括号命名

├── pages
│   ├── posts
│   │   ├── index.vue
│   │   ├── [id].vue

• 使用

const router = useRouter();
router.push("/posts");
router.push("/posts/1");

• 调用

<script setup>
  // 接收参数
  const route = useRoute();
  console.log(route.params.id);
</script>

嵌套以中括号命令文件夹和文件

├── pages
│   ├── [type]
│   │   ├── [id].vue

• 使用

<script setup>
  // 传递两个参数
  const router = useRouter();
  router.push("/a/1");
  router.push("/b/123");
</script>

• 调用

<script setup>
  // 接收参数
  const route = useRoute();
  console.log(route.params.type, route.params.id);
</script>

文件夹和文件以中括号命令

├── pages
│   ├── post-[type]
│   │   ├── [id].vue

• 使用

<script setup>
  // 传递两个参数
  const router = useRouter();
  router.push("/posts-a/1");
  router.push("/posts-b/123");
</script>

• 调用

// 接收参数
const route = useRoute();
console.log(route.params.type, route.params.id);

文件以[....]命令

├── pages
│   ├── posts
│   │   ├── [...].vue

• 使用

// 此方式没有任何的参数限制
const router = useRouter();
router.push("/posts/a/1");
router.push("/posts/b/123");
router.push("/posts/b/123/32323");

• 调用

// 接收参数
const route = useRoute();
console.log(route.params.all[0], route.params.all[1], route.params.all[2]);

路由跳转

组件跳转

<template>
  <nav>
    <ul>
      <li><NuxtLink to="/">home</NuxtLink></li>
      <li><NuxtLink to="/about">about</NuxtLink></li>
    </ul>
  </nav>
</template>

方法跳转

<script>
  const router = useRouter();
  router.push("/about");
</script>

路由参数

拼接

<script setup>
  // 路由跳转
  const router = useRouter();
  router.push("/detail?id=123&name=hello");
</script>

<script setup>
  // 接受参数
  const route = useRoute();
  console.log(route.query.id, route.query.name);
</script>

路由中间件

局部中间件

定义在 middleware 文件夹中，当页面每次使用时，会通过异步导入自动加载执行

├── middleware
│   ├── auth.js

• 使用auth.js

export default defineNuxtRouteMiddleware((to, from) => {
  console.log("要去那个页面:" + to.path);
  console.log("来自那个页面:" + from.path);
});

• 页面里面调用

<script setup lang="ts">
  definePageMeta({
    middleware: "auth",
  });
</script>

<template>
  <h1>我是首页使用了路由中间件</h1>
</template>

全局中间件

必须定义在 middleware 文件夹中

必须使用.global.js 后缀

在每次路由变化时自动执行。

├── middleware
│   ├── auth.global.js

• 使用auth.global.js

export default defineNuxtRouteMiddleware((to, from) => {
  console.log("要去那个页面:" + to.path);
  console.log("来自那个页面:" + from.path);
});

这样全局就能使用

路由验证(少)

这个可以写在中间件里面。也可以写在页面里

中间件里面就不做阐述了,下面是页面里

<script setup lang="ts">
  definePageMeta({
    validate: async (route) => {
      // 检查id是否由数字组成
      return /^\d+$/.test(route.params.id);
    },
  });
</script>