Vue3 ルーティングパラメータの概要

目次

1. 名前 + パラメータ

2. 名前 + クエリ

3. パス + クエリ

4. パス文字列? ステッチパラメータ

5. パス文字列/連結パラメータ

---

以下のメソッドのリフレッシュパラメータは失われません。

1. 名前 + パラメータ

ルーティング構成 (動的ルーティング形式として構成する必要があります。元の直接パラメーター受け渡しは使用できません)

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/about/:id',
      name: 'about',
      component: () => import('../views/AboutView.vue'),
    },
  ],
})

export default router

コンポーネントA

<script>
import { useRouter } from 'vue-router'

export default {
  name: 'Home',
  setup() {
    const router = useRouter()

    const toAbout = () => {
      router.push({
        name: 'about',
        params: {
          id: 100,
        },
      })
    }

    return {
      toAbout,
    }
  },
}
</script>

<template>
  <main>
    <button @click="toAbout">to About</button>
  </main>
</template>

コンポーネントB

<script>
import { useRoute } from 'vue-router'

export default {
  name: 'about',
  setup() {
    const route = useRoute()
    console.log('99999999', route.params)
  },
}
</script>

<template>
  <div class="about">
    <h1>about</h1>
  </div>
</template>

2. 名前 + クエリ

ルーティング設定 (通常の形式で十分です。クエリはパラメータをパスに接続しますか?)

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue'),
    },
  ],
})

export default router

コンポーネントA

<script>
import { useRouter } from 'vue-router'

export default {
  name: 'Home',
  setup() {
    const router = useRouter()

    const toAbout = () => {
      router.push({
        name: 'about',
        query: {
          id: 100,
        },
      })
    }

    return {
      toAbout,
    }
  },
}
</script>

<template>
  <main>
    <button @click="toAbout">to About</button>
  </main>
</template>

コンポーネントB

<script>
import { useRoute } from 'vue-router'

export default {
  name: 'about',
  setup() {
    const route = useRoute()
    console.log('99999999', route.query)
  },
}
</script>

<template>
  <div class="about">
    <h1>about</h1>
  </div>
</template>

3. パス + クエリ

ルーティング設定 (通常の形式で十分です。クエリはパラメータをパスに接続しますか?)

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue'),
    },
  ],
})

export default router

コンポーネントA

<script>
import { useRouter } from 'vue-router'

export default {
  name: 'Home',
  setup() {
    const router = useRouter()

    const toAbout = () => {
      router.push({
        path: '/about',
        query: {
          id: 100,
        },
      })
    }

    return {
      toAbout,
    }
  },
}
</script>

<template>
  <main>
    <button @click="toAbout">to About</button>
  </main>
</template>

コンポーネントB

<script>
import { useRoute } from 'vue-router'

export default {
  name: 'about',
  setup() {
    const route = useRoute()
    console.log('99999999', route.query)
  },
}
</script>

<template>
  <div class="about">
    <h1>about</h1>
  </div>
</template>

4. パス文字列? ステッチパラメータ

ルーティング構成

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue'),
    },
  ],
})

export default router

コンポーネントA

<script>
import { useRouter } from 'vue-router'

export default {
  name: 'Home',
  setup() {
    const router = useRouter()

    const toAbout = () => {
      router.push('/about?id=100')
    }

    return {
      toAbout,
    }
  },
}
</script>

<template>
  <main>
    <button @click="toAbout">to About</button>
  </main>
</template>

コンポーネントB

<script>
import { useRoute } from 'vue-router'

export default {
  name: 'about',
  setup() {
    const route = useRoute()
    console.log('99999999', route.query)
  },
}
</script>

<template>
  <div class="about">
    <h1>about</h1>
  </div>
</template>

5. パス文字列/連結パラメータ

ルーティング構成

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/about/:id',
      name: 'about',
      component: () => import('../views/AboutView.vue'),
    },
  ],
})

export default router

コンポーネントA

<script>
import { useRouter } from 'vue-router'

export default {
  name: 'Home',
  setup() {
    const router = useRouter()

    const toAbout = () => {
      router.push('/about/100')
    }

    return {
      toAbout,
    }
  },
}
</script>

<template>
  <main>
    <button @click="toAbout">to About</button>
  </main>
</template>

コンポーネントB

<script>
import { useRoute } from 'vue-router'

export default {
  name: 'about',
  setup() {
    const route = useRoute()
    console.log('99999999', route.params)
  },
}
</script>

<template>
  <div class="about">
    <h1>about</h1>
  </div>
</template>