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 标签里获取参数的方法。

以上关于04. Nuxt3动态路由的使用的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。