SPAの詳細ページ実装を簡単にまとめる

概要

vue.jsでアプリを作る際、詳細画面をどのように実装するのか少しわからなったので、自分が理解した範囲でひとつの方法をまとめていきたいと思います。

今回は、vue.jsのrouterを使用します。

routerを定義

index.ts

const routes = [
  {
    path: '/',           //パスの設定
    component: Index,    //表示するコンポーネント
    name: 'index',       //ルートの名前を指定
  },
  {
    path: '/search',            
    component: Search,
    name: 'Search',
  },
  {
    path: '/:id',            
    component: Detail,
    name: 'Detail',
  },
]

検索(Search)ページ

Child.vue

<template>
</template>

<script lang="ts">
import {Vue} from 'vue'

class Child extend Vue {
    /** 下記の方法でパラメータとして渡されたIDを読み取ることが可能 */
    private id = this.route.params.id
    /** 詳細ページへ遷移 */
    private router(){
        this.$router.push(`/ ${this.id}`)
}  
</script>

↓　idは、routerのpathに指定しているものと同様にする必要がある。

this.route.params.id

もしも、pathを'/:name'としていた場合、this.route.params.nameになる。

他にも実装方法はあるとは思いますが、こちらの方法が簡単な方法ではないかなと思います。