04. Nuxt3动态路由的使用

上节我们学习如何新建一个页面，然后又学习了静态路由的使用和跳转方法。本节我们再来学习一下动态路由的使用 Dynamic Routes。

单参数的传递

单参数的传递只要在页面的文件名中用[ ]扩起来就可以了。比如新建一个页面，叫做 demo2-[id].vue。

-| pages/
---| index.vue
---| demo2-[id].vue

也就是说我们使用[ ]的形式就可以设置一个页面的传参，参数接收可以使用 $route.params.id的形式。

<template>
  <div class="">获取的 id:{{ $route.params.id }}</div>
</template>

<script setup>
import { } from "vue";
</script>

<style scoped></style>

我们去首页制作一个链接。

<template>
  <div class="">
    <h1>Index Page</h1>
    <NuxtLink to="/demo1">Demo1.vue</NuxtLink> <br />
    <NuxtLink to="/demo2-38">Demo2.vue</NuxtLink>
  </div>
</template>

<script setup>
import {} from "vue";
</script>

<style scoped></style>

这时候再到浏览器预览一下，调整后能得到 ID，可以了。

在 script 里获取参数

上面只是在页面中获取了参数，实际作用并不大。工作中获取参数后，都要进行业务逻辑的处理，所以在<script>标签里获取参数，才是真实的开发需求。

<template>
  <div class="">获取的 id:{{ id }}</div>
</template>

<script setup>
import { ref } from "vue";
const route = useRoute();
const id = ref(route.params.id);
</script>

<style scoped></style>

上面的代码通过useRoute() 获得了 route 然后通过 ref 让template可用。

多参数的获取

有人说是不是再写一个括号就可以传递多一个参数了，这种是不行的。如果你要传递是两个参数。你需要建立一个文件夹，然后在文件夹上使用[ ]来确定参数。比如我们要传递一个 name 的参数过来。就需要把目录和文件建立成这样。

-|  pages/
---| index.vue
---| goods-[name]/
-----| demo2-[id].vue

然后修改一些demo2-[id].vue的文件，修改获取的参数。

<template>
  <div class="">获取的 id:{{ id }}</div>
  <div class="">获取的 name:{{ name }}</div>
</template>

<script setup>
import { ref } from "vue";
const route = useRoute();
const id = ref(route.params.id);
const name = ref(route.params.name);
</script>

<style scoped></style>

再到index.vue 修改链接，传递两个参数。

Demo2.vue

完成后再到浏览器中查看结果，可以看到已经接收到了两个参数。

总结

本文主要学习了 Nuxt3 中的动态路由，包括：单参数的传递、多参数的传递和在 Script 标签里获取参数的方法。