Nuxt.js：如何使用不同网址的同一个页面，根据网址切换要显示的组件

Question

我想在 Nuxt.js 中实现以下内容：

1.使用不同网址的同一个页面。
具体来说，我想/pages/users/_userId.vue与/users/{userId},/users/{userId}/follow和一起使用/users/{userId}/follower。

我检查了这个，有以下问题。
- https://github.com/nuxt/nuxt.js/issues/2693
但这与我想要实现的有点不同。
我想将 pass 参数用于查询参数。

2.通过路径参数识别要显示的组件
看这里的代码会更快。

?/pages/users/_userId.vue`

<template>
  <div class="user">
    <div class="user__contents">
      <div class="user__contents__main">
        <UserInfo/>
        <PostSection/> -> use if URL /users /{userId}
        <FollowSection/> -> use if URL /users/{userId}/follow
        <FollowerSection/> -> use if URL /users/{userId}/follower
      </div>
    </div>
  </div>
</template>

<script>
import UserInfo from '~/components/organisms/users/UserInfo'
import PostsSection from '~/components/organisms/users/PostsSection'
import FollowSection from '~/components/organisms/users/FollowSection'
import FollowerSection from '~/components/organisms/users/FollowerSection'

...

我应该怎么做才能实现这些？

Answer 1

由于显示的组件取决于当前路由，因此您可以使用路由器。即使用 nuxtjs 嵌套路由功能。（nuxtjs 文档中的动态嵌套路由示例）

pages/
--| users/
-----| _id/
--------| follow.vue // contains FollowSection
--------| follower.vue // contains FollowerSection
--------| index.vue // contains UserProfile
-----| _id.vue

// users/_id.vue
<template>
  <div class="user">
    <div class="user__contents">
      <div class="user__contents__main">
        <UserInfo>
        <NuxtChild 
           :user="user"
           @custom-event="customEventHandler"
        />
      </div>
    </div>
  </div>
<template>

您可以将组件重用为嵌套页面，如下所示：

// pages/users/_id/follower.vue

<script>
 // don't create a template for the section
import FollowSection from '~/components/organisms/users/FollowSection'
export default FollowSection
</script>

请注意，您不需要导入子组件，_id.vue因为 nuxt 配置 vue-router 这样做。此外，您可以像普通组件一样传递道具并向它们发送事件。