Nuxt.js: How to use the same page with different URLs and switch the components to be displayed according to the URL

Question

I want to implement the following in Nuxt.js:

1.Use the same page with different URLs.
Specifically, I want to use /pages/users/_userId.vue with/users/{userId}, /users/{userId}/follow and /users/{userId}/follower.

I examined this and there were the following issues.
- https://github.com/nuxt/nuxt.js/issues/2693
But it was a little different from what I wanted to achieve.
I want to use the pass parameter for the query parameter.

2.Identify the components to display by path parameters
It would be quicker to have a look at the code here.

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

...

What should I do to achieve these?

Answer 1

As the displayed components depends on the current route, you can use the router. Namely using the nuxtjs nested routes feature. (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>

You can reuse the components as nested pages like that:

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

Note that you don't need to import the child components in _id.vue because nuxt configure vue-router to do so. Also that you can pass props and send events to them like normal components.

Answer 2

All your paths have a common prefix users/. So you can use the pages/users/_.vue component to match any path starting with the users/ that was not matched to any other component.

In this component you can examine $nuxt.$route.params.pathMatch to decide, which subcomponent to show. It will contain part of path after 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>