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

【问题标题】：Nuxt.js: How to use the same page with different URLs and switch the components to be displayed according to the URLNuxt.js：如何使用不同URL的同一页面，并根据URL切换要显示的组件
【发布时间】：2019-08-18 18:02:48
【问题描述】：

我想在 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'

...

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

【问题讨论】：

标签： javascript vue.js nuxt.js

【解决方案1】：

您可以通过像这样设置项目目录结构来创建单独的页面，而不是一页。会更容易处理和修改

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

【讨论】：

这不是最佳解决方案。两次拥有相同的 .vue 页面很难维护。

【解决方案2】：

由于显示的组件取决于当前路由，因此您可以使用路由器。即使用 nuxtjs 嵌套路由功能。 (example of dynamic nested routes in nuxtjs docs)

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 这样做。此外，您可以像普通组件一样传递道具并向它们发送事件。

【讨论】：

尝试执行此操作时出现语法错误。 Nuxt 2.14.6 Syntax Error: Unexpected token, expected "{" 。似乎不喜欢导出导入。
应该是export default FollowSection 而不是export FollowSection
您好！我正在重用页面，但我仍然需要设置一个参数，例如在实例启动之前的 prop ou 数据，例如 import index from "~/pages/blog/_category/index.vue" const a = index a.data()。 nome = "Maralhiva" export default a 没用但是有什么办法吗？
@RobertoFonseca 您可以将数据作为道具传递给<nuxt-child :nome="nome">。这将适用于接受 nome 道具的页面组件

【解决方案3】：

所有路径都有一个公共前缀 users/。因此，您可以使用pages/users/_.vue 组件来匹配任何以users/ 开头但未与任何其他组件匹配的路径。

在这个组件中，您可以检查$nuxt.$route.params.pathMatch 来决定要显示哪个子组件。它将包含users/之后的部分路径：

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

【讨论】：