Nuxt.js：如何在具有不同URL的同一页面上使用以及如何根据URL切换要显示的组件

Question

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

1.使用相同的页面使用不同的URL。

具体而言，我想用/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>&nbsp; <div class="user">&nbsp; &nbsp; <div class="user__contents">&nbsp; &nbsp; &nbsp; <div class="user__contents__main">&nbsp; &nbsp; &nbsp; &nbsp; <UserInfo>&nbsp; &nbsp; &nbsp; &nbsp; <NuxtChild&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;:user="user"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;@custom-event="customEventHandler"&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div><template>您可以像下面这样将组件重用为嵌套页面：// pages/users/_id/follower.vue<script>&nbsp;// don't create a template for the sectionimport FollowSection from '~/components/organisms/users/FollowSection'export FollowSection</script>请注意，您不需要导入子组件，_id.vue因为nuxt配置了vue-router来进行导入。另外，您可以像传递常规组件一样传递道具并将事件发送给它们。

Answer 2

您所有的路径都有一个共同的前缀users/。因此，您可以使用该pages/users/_.vue组件来匹配以开头的与users/其他任何组件都不匹配的路径。在此组件中，您可以检查$nuxt.$route.params.pathMatch决定显示哪个子组件。它将包含以下路径的一部分users/：<template>&nbsp; <div class="user">&nbsp; &nbsp; <div class="user__contents">&nbsp; &nbsp; &nbsp; <div class="user__contents__main">&nbsp; &nbsp; &nbsp; &nbsp; <UserInfo />&nbsp; &nbsp; &nbsp; &nbsp; <PostSection v-if="/^\d+$/.test(path)" />&nbsp; &nbsp; &nbsp; &nbsp; <FollowSection v-else-if="/^\d+\/follow$/.test(path)" />&nbsp; &nbsp; &nbsp; &nbsp; <FollowerSection v-else-if="/^\d+\/follower$/.test(path)" />&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></template><script>export default {&nbsp; computed: {&nbsp; &nbsp; path() {&nbsp; &nbsp; &nbsp; return this.$nuxt.$route.params.pathMatch;&nbsp; &nbsp; },&nbsp; },&nbsp; ...};</script>

Answer 3

您可以通过设置项目目录结构（而不是一页）来创建单个页面，就像这样。它将更易于处理和修改pages/--| users/-----| _id/--------| follow.vue--------| follower.vue-----| _id.vue