Nuxt2创建动态子级路由 拼接id

在 Nuxt.js 中，可以使用动态路由创建动态子级路由。在创建动态路由时，可以在路由的 path 中使用动态参数，以冒号开头，例如：

/pages/:id

这将会匹配 /pages/1、/pages/2 等路径。接着，你可以在页面组件中使用 $route.params.id 获取路由参数中的 id。

如果需要拼接 id，可以使用字符串模板或者 ES6 模板语法来构造链接。例如：

<nuxt-link :to="`/pages/${id}`">Go to page {{ id }}</nuxt-link>

或者

<nuxt-link :to="'/pages/' + id">Go to page {{ id }}</nuxt-link>

其中，id 是页面组件中的一个变量，可以通过 props 或者 data 来传递。

相关问题

nuxt2创建路由怎么创建多个子级路由

在 Nuxt.js 中，可以使用嵌套路由来创建多个子级路由。首先，在 `pages` 目录下创建一个文件夹，例如 `parent`，然后在该文件夹下创建一个 `index.vue` 文件，这将成为父级路由。接下来，在 `parent` 文件夹下创建另一个文件夹，例如 `child`，并在该文件夹下创建一个 `index.vue` 文件，这将成为子级路由。最后，您可以在 `nuxt.config.js` 文件中使用以下代码来定义路由：

export default {
  // ...
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'parent-child',
        path: '/parent/:parentId/child',
        component: resolve(__dirname, 'pages/parent/child/index.vue')
      })
    }
  }
}

这将创建一个名为 `parent-child` 的路由，它的路径将是 `/parent/:parentId/child`，其中 `:parentId` 是一个动态参数，可以在父级路由中使用。该路由将使用 `pages/parent/child/index.vue` 组件作为其组件。您可以根据需要添加更多的子级路由，只需在 `child` 文件夹下创建更多的路由组件，并在 `nuxt.config.js` 中定义它们即可。

Nuxt2怎么创建动态路由

在 Nuxt2 中，你可以使用动态路由来创建基于参数的动态页面。你可以在 `pages` 目录下创建一个带有动态参数的 `.vue` 文件来实现动态路由。

例如，要创建一个基于 `id` 参数的动态路由页面，你可以在 `pages` 目录下创建一个名为 `_id.vue` 的文件。在该文件中，你可以使用 `asyncData` 方法来获取动态参数，并将其作为数据传递到页面组件中。

下面是一个示例：

<template>
  <div>
    <h1>动态路由页面</h1>
    <p>ID: {{ id }}</p>
  </div>
</template>

<script>
export default {
  async asyncData({ params }) {
    const { id } = params
    return { id }
  }
}
</script>

在上面的示例中，我们使用 `asyncData` 方法从动态参数中获取 `id` 并将其作为数据传递到页面组件中。在模板中，我们可以访问该数据并显示它。

要访问该页面，你可以访问 `/id`，其中 `id` 是你想要的动态参数。例如，访问 `/1` 将显示 ID 为 1 的页面。