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

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

1.使用不同URL的同一页面。
具体来说，我想使用

/pages/users/_userId.vue

和

/users/{userId}

、

/users/{userId}/follow

和

/users/{userId}/follower

我对此进行了检查，发现了以下问题。
-
但这与我想要实现的目标略有不同。
我想使用pass参数作为查询参数。

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

・/页面/用户/_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'

->如果URL/users/{userId}使用
->如果URL/users/{userId}/follow，则使用
->如果URL/users/{userId}/follower，则使用
从“~/components/Organics/users/UserInfo”导入用户信息
从“~/components/Organiss/users/PostsSection”导入PostsSection
从“~/components/Organics/users/FollowSection”导入FollowSection
从“~/components/Organiss/users/FollowerSection”导入FollowerSection

---

如何实现这些目标？

您可以通过如下设置项目目录结构来创建单独的页面，而不是一个页面。它将更易于处理和修改

pages/
--| users/
-----| _id/
--------| follow.vue
--------| follower.vue
-----| _id.vue

---

由于显示的组件取决于当前路由，因此可以使用路由器。 即使用nuxtjs嵌套路由功能

//用户//\u id.vue

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

// 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>

//pages/users/\u id/follower.vue
//不要为节创建模板
从“~/components/Organics/users/FollowSection”导入FollowSection
导出默认的FollowSection

---

请注意，您不需要在

\u id.vue

中导入子组件，因为nuxt将vue路由器配置为这样做。您还可以像普通组件一样传递道具并向它们发送事件。

您的所有路径都有一个通用前缀

users/

。因此，您可以使用

pages/users/.vue

组件来匹配以

users/

开头的任何未与任何其他组件匹配的路径

在此组件中，您可以检查

$numxt.$route.params.pathMatch

，以确定要显示的子组件。它将在

用户/

之后包含部分路径：

<template>
  <div class="user">
    <div class="user__contents">
      <div class="user__contents__main">
        <UserInfo />
        <PostSection v-if="/^\d+$/.test(path)" />
        <FollowSection v-else-if="/^\d+\/follow$/.test(path)" />
        <FollowerSection v-else-if="/^\d+\/follower$/.test(path)" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    path() {
      return this.$nuxt.$route.params.pathMatch;
    },
  },
  ...
};
</script>

导出默认值{
计算：{
路径（）{
返回此.$numxt.$route.params.pathMatch；
},
},
...
};

这不是最佳解决方案。两次使用相同的.vue页面很难维护。尝试这样做时，我会遇到语法错误。Nuxt 2.14.6

语法错误：意外标记，应为“{”

。似乎不喜欢导出导入。我也有同样的错误：（它应该是

导出默认的FollowSection

而不是

导出FollowSection

// 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>

<template>
  <div class="user">
    <div class="user__contents">
      <div class="user__contents__main">
        <UserInfo />
        <PostSection v-if="/^\d+$/.test(path)" />
        <FollowSection v-else-if="/^\d+\/follow$/.test(path)" />
        <FollowerSection v-else-if="/^\d+\/follower$/.test(path)" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    path() {
      return this.$nuxt.$route.params.pathMatch;
    },
  },
  ...
};
</script>