【Vue Router】URLのパラメーターから個別ページに移動したい

以前の記事をベースに、今回はURLのidパラメータによってページの表示が切り替わる仕組みを作成していきます。

商品一覧ページから商品詳細ページなどへ飛ぶ際に便利かと思います。

router.jsへの追記

import Vue from 'vue'
import VueRouter from 'vue-router'
// ルート用のコンポーネントの読み込み
import Home from '@/views/Home.vue'
import Product from '@/views/Product.vue'
import ProductList from '@/views/ProductList.vue' //Product.vueを新たにインポート

Vue.use(VueRouter)


//VueRouterインスタンスの生成
const router = new VueRouter({
    mode: 'history',
    //URLのパスと紐付くコンポーネントをマッピング
    routes: [
        { path: '/', component: Home},
        { path: '/product', component: ProductList},
        // { path: '/product/:id', component: Product}, :idとしておけばパラメータに可変の値を入れられる
        { path: '/product/:id(\\d+)', component: Product}, //(\\d+)を付ければパラメータには数字しか入らない正規表現となる
        ]
})

export default router

コメントの通りですが、idに数字しか入らないということであれば下の正規表現を使用した方が適切かと思います。

        // { path: '/product/:id', component: Product}, :idとしておけばパラメータに可変の値を入れられる
        { path: '/product/:id(\\d+)', component: Product}, //(\\d+)を付ければパラメータには数字しか入らない正規表現となる

src/views/ProductList.vueの作成

src/views/Product.vueの転用でOKです。

<template>
    <div class="product">
        <h1>商品一覧</h1>
    </div>
</template>

src/views/Product.vueの編集

<template>
    <div class="product">
        <h1>商品情報</h1>
        <!--$routeは現在のrouteインスタンスを表す-->
        <!--:idでパラメーターを指定したものは、params.idで呼び出せる-->
        <p>このページは、ID.{{ $route.params.id }}の詳細を表示する</p>
    </div>
</template>

説明通りですが、

{{ $route.params.id }}

によってURLのパラメータに入ってきたidを呼び出すことができます。

パラメータをpropsにして渡す

routeを直接表示させるのは、ルートとコンポーネントが密結合していることになるためあまり好ましくないようです。

そこで以下のようにpropsを使用して、idパラメーターを渡すことで、上記と同様の機能を持たせることができます。

src/views/Product.vueの編集

<template>
    <div class="product">
        <h1>商品情報</h1>
        <!--表示させるのはpropsのid-->
        <p>このページは、ID.{{ id }}の詳細を表示する</p>
    </div>
</template>

<script>
　// propsでidを受け取るようにすると同時に、Numberでデータ型も指定する
    export default {
        props: { id: Number }
    }
</script>

src/router.jsの編集

const router = new VueRouter({
    mode: 'history',
    routes: [
        { path: '/', component: Home},
        { path: '/product', component: ProductList},
        
        
        { path: '/product/:id(\\d+)', 
        component: Product,
        // propsにidとデータ型の指定をする
        props: route => ({ id: Number(route.params.id) })}, 
        ]
})

propsの項目を商品詳細ページに追加します。

GitHub

first commit · hirakumorishima02/my-vue-practice@f353aeb · GitHub

参考

基礎から学ぶ Vue.js