Vue.js Vue-routerで画面遷移先にパラメーターを渡す方法
はじめに
Vue.jsのVue-routerを使用しアプリケーションを作成していたのですが、
ページの遷移先にパラメータを渡す方法がわかりませんでした。
無事パラメーターを渡せたので、方法を残します。
コード
・index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [{
path: '/',
name: 'Home', //名前付きルート
component: Home
},
{
path: ‘ /sample’,
name: ’Sample’, //名前付きルート
component: () => import('../views/sample.vue')
}, {
path: ‘ /test’,
name: ’Test’, //名前付きルート
component: () => import('../views/test.vue')
}
]
const router = new VueRouter({
base: process.env.BASE_URL,
routes
})
export default router
・リンク元 (sample.vue)
Router-linkタグを使いname(名前付きルート)を記述しリンクを作成します。
その際に、params:でパラメーターを指定しリンク先へ渡します。
・リンク先(test.vue)
<template>
<p>{{$route.params.text}}</p>
</template>
{{ $route.params.text }} のように通常の変数と同じ方法で受け取ったパラメーターを展開できます。
クエリパラメータを渡す
調べていたらクエリパラメーターを渡す方法も、router-linkで同様の手順で簡単に渡せるので併せて記述。
コード
・リンク元
<template>
<router-link :to = "{ name: 'Test', query:{str: 'test'} }">
クエリパラメーター</router-link>
</template>
・リンク先
<template>
<p>{{$route.query.text}}</p>
</template>
Router-linkタグに”query:”を記載します。
ちなみにqueryについてはname(名前付きルート)を使用しなければならないという制約はないようです。
