上节我们学习如何新建一个页面，然后又学习了静态路由的使用和跳转方法。本节我们再来学习一下动态路由的使用 Dynamic Routes。
单参数的传递
单参数的传递只要在页面的文件名中用[ ]扩起来就可以了。比如新建一个页面，叫做 demo2-[id].vue。
-| pages/ ---| index.vue ---| demo2-[id].vue
也就是说我们使用[ ]的形式就可以设置一个页面的传参，参数接收可以使用 $route.params.id的形式。
<template>
<div >获取的 id:{{ $route.params.id }}</div>
</template>
<script setup>
import { } from "vue";
</script>
<style scoped></style>
我们去首页制作一个链接。
<template>
<div >
<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 >获取的 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 >获取的 id:{{ id }}</div>
<div >获取的 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 标签里获取参数的方法。