【Nuxt】動的ルーティングをすぐ忘れるからまとめてみた

#はじめに
本記事へのアクセスありがとうございます。
動的ルーティングの詳細について理解度を深めるため、忘れないようにするために簡潔にまとめてみます。
では、さっそく見ていきましょう。

#基本的なルーティング方法
想定ディレクトリは下記の通りです。

├─pages
│  ├─index.vue
│  ├─test
│  │   └─test.vue

##nuxt-linkを用いる

.pages/index.vue

<template>
   <nuxt-link to="/test">testへ遷移</nuxt-link>
</template>

##router-linkを用いる 【nameを使う】

.pages/index.vue

<template>
   <router-link :to="{name: 'test'}">testへ遷移</router-link>
</template>

##router-linkを用いる 【pathを使う】

.pages/index.vue

<template>
   <router-link :to="{path: 'test'}">testへ遷移</router-link>
</template>

##router-pushを用いる 【nameを使う】

.pages/index.vue

<template>
   <btn @click="transition()"> submit </v-btn>
</template>

<script>
export default {
  methods: {
    transition() {
      this.$router.push({ name: 'test' })
     },
   }
}
</script>

##router-pushを用いる 【pathを使う】

.pages/index.vue

<template>
   <btn @click="transition()"> submit </v-btn>
</template>

<script>
export default {
  methods: {
    transition() {
      this.$router.push('test')
     },
   }
}
</script>

#paramsを使ったルーティング方法
想定ディレクトリは下記の通りです。

├─pages
│  ├─test
│  │   ├─_hoge
│  │        └─index.vue

##paramsを使ったルーティング引数なし

.pages/index.vue

<template>
   <btn @click="transition()"> submit </v-btn>
</template>

<script>
export default {
  methods: {
    transition() {
         this.$router.push({ name: 'test-hoge', params: {hoge: 123 } })
     },
   }
}
</script>

##paramsを使ったルーティング引数あり

.pages/index.vue

<template>
   <btn @click="transition(123)"> submit </v-btn>
</template>

<script>
export default {
  methods: {
    transition(hoge) {
         this.$router.push({ name: 'test-hoge', params: { hoge } })
     },
   }
}
</script>

##paramsを使ったルーティング方法 ( _index.vueバージョン )
想定ディレクトリは下記の通りです。

├─pages
│  ├─test
│  ├─hoge
│  │  └─_id.vue

.pages/index.vue

<template>
   <btn @click="transition()"> submit </v-btn>
</template>

<script>
export default {
  methods: {
    transition() {
         this.$router.push({ name: 'hoge-id', params: { id : 123 } })
     },
   }
}
</script>

##paramsを使ったルーティング方法 ( 2階層から3階層目 )
想定ディレクトリは下記の通りです。

├─pages
│  ├─index.vue
│  ├─test   
│  │   ├─ _hoge   
│  │        ├─ index.vue   
│  │        ├─_hoo
　　　　　　　　　 └─ index.vue  

.pages/test/hoge/index.vue

<template>
   <btn @click="transition(123)"> submit </v-btn>
</template>

<script>
export default {
  methods: {
    transition(hoo) { 
         const hoge = this.$route.params.hoge
         this.$router.push({ name: 'test-hoge-hoo', params: { hoge , hoo} })
     },
   }
}
</script>

#おわりに
お疲れ様でした。

少しでも役に立ったと思う方がいましたらLGTMをお願いします🙇‍♂️

queryについてのルーティングも気が向いたら追記します。