Nuxt.js 路由动态参数（$route.id）与链接

Nuxt.js 是一个基于 Vue.js 的应用框架，提供了许多便捷的功能，使得开发单页面应用（SPA）变得更加容易。其中一个非常有用的功能是路由动态参数。

什么是路由动态参数

路由动态参数是指在路由定义时，可以使用占位符（用冒号:表示），将一个部分路径变为变量。例如：

// pages/_id.vue
export default {
  async asyncData({ params }) {
    const postId = params.id
    const post = await fetch(`https://api.com/posts/${postId}`).then(r => r.json())
    return { post }
  }
}

上面的例子中，定义了一个路由规则，路由路径为/posts/:id，其中:id表示是动态的。在实际运行时，这部分路径会被替换成实际的值。

如何使用动态参数

在组件中访问动态参数的值，可以通过 $route 对象来获取：

<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.body }}</p>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios, $route }) {
    const postId = $route.params.id
    const post = await $axios.$get(`/posts/${postId}`)
    return { post }
  }
}
</script>

在上面的例子中，通过 $route.params.id 来获取动态参数的值。

如何进行页面跳转

在 Nuxt.js 中，可以使用 <nuxt-link> 标签来进行页面跳转。

<template>
  <nuxt-link :to="{ name: 'posts-id', params: { id: post.id } }">{{ post.title }}</nuxt-link>
</template>

上面的例子中，使用了 <nuxt-link> 标签来生成一个链接，其中 name 属性表示路由名称，params 属性表示传递的参数。

总结

本文介绍了 Nuxt.js 的路由动态参数以及如何使用它们进行页面跳转。它们可以方便地实现单页面应用中的动态路由功能。