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>

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

</script>

请注意，您不需要导入子组件，_id.vue因为nuxt配置了vue-router来进行导入。另外，您可以像传递常规组件一样传递道具并将事件发送给它们。

Answer 2

您所有的路径都有一个共同的前缀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>

Answer 3

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

pages/

--| users/

-----| _id/

--------| follow.vue

--------| follower.vue

-----| _id.vue