Nuxt.js의 동적 라우팅으로 Qiita 같은 구성을 만들어 보는 메모

Qiita와 같은 구성을 만들어 본 메모입니다.

일반 Nuxt.js의 동적 라우팅

이런 구성으로 하면

pages/
--| users/
-----| _id.vue
--| index.vue

https://ドメイン/users/<ユーザー名> 같은 구성을 만들 수 있습니다.

htps : // 그럼. 없는 xtjs. 오 rg/구이데/로츤 g#%에5%8B%95%에7%9아%84%에3%81%아%에3%83%아B%에3%83%BC%에3 %83%86%에3%82%아3%에3%83%B3%에3%82%B0

이 사용자 이름 부분이 URL에 액세스했을 때의 값으로 동적으로 바뀝니다.

Qiita 같은 구성은?

(2020년 9월 시점) Qiita의 기사는 이하와 같은 구성입니다.

https://ドメイン/<ユーザー名>/items/<記事ID>

예 : https://qiita.com/n0bisuke/items/ceaa09ef8898bee8369d
방금 전의 ユーザー名 만이 동적 인 경우와 달리 중첩되어 記事ID도 동적입니다.

이것을 Nuxt로 재현하고 싶다는 이야기입니다.

이러한 디렉토리 구성

참고 기사 등을 보면서 만지면 이런 구성으로 잘 갔습니다.

pages/
--| _userid/
-----| items
--------| _itemid.vue
-----| index.vue
--| index.vue

말단이 되는 기사 페이지는 /pages/_userid/items/_itemid.vue 가 됩니다.



할 수 있다면 그런 걸까라는 느낌이군요.

기사 페이지 코드

메모 정도입니다.

_itemid.vue

<template>
  <section class="section">
    {{userid}}のitem:{{itemid}}
  </section>
</template>

<script>

export default {
  name: 'item',

  data(){
    return{}
  },

  computed: {},
  mounted(){},
  methods: {},

  async asyncData({ $content, params }) {
    const userid = params.userid;
    const itemid = params.itemid;
    return {userid, itemid};
  },
}
</script>

참고

htps : // 이 m / 한 사람 / ms / 46bc9c6 a d88 fu d46 ea 14