はじめに

画面遷移時のクエリの備忘録

Do it

データを渡すvueファイル

<li v-for="item in qiitaPosts" :key="item.id">
    <span class=”dan”><router-link :to="{name:'file-list-details',query:{title:item.title,created_at:item.created_at}}">{{item.title}}</router-link></span> : 
    <span class=”dan2″ v-bind:class="{'style':selectedItem.includes(item.id)}">{{item.created_at}}</span>
</li>

データを受け取るvueファイル

<template>
    <div>
        <h1>{{$route.query.title}}</h1>
        <h2>{{$route.query.created_at}}</h2>
    </div>
</template>

router-linkには:to="{name:'file-list-details',query:{title:item.title}}"をつける

データの遷移元で渡したデータを扱うには$route.query.{キー名}を使用する

ここで記述することを忘れずに router.js

export default new Router({
    mode:'history',
    routes:[{
        path:'/file_list',
        component: ShareFileList
    },{
        path:'/file_list_details/S',
        name:'file-list-details',　//router-linkのnameはここを参照
        component: ShareFileDetails
    }]
})

日々勉強

画面遷移時に遷移先にクエリを渡す　[Vue.js]

目次

はじめに

Do it