【vue.js】Vue RouterでURLパラメータ(query) 使用
Vue を使っていて、URLパラメータ（http://example.com/?X=Y の?X=Yの部分）を使用する方法を紹介します
vue Router導入については下記が参考になれば。
?username=yamadaと?usename=suzukiいうパラメータを渡す例
src/router.js
import Vue from 'vue'
import Router from 'vue-router'
// コンポーネントを読み込む
import Home from './Home.vue'Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/', /
component: Home, // このコンポーネントを呼ぶname: 'home',
props: (route) => ({ query: route.query.q })
}
]
});
src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
public/index.html
<!DOCTYPE html>
<html lang="en"><head>
// ここにメタタグなど普通のheadを記載
</head>
<body>
<div id="app"></div>
</body>
</html>
src/App.vue
<template>
<div id="app">
<router-link to="/">
home
</router-link>
<router-link :to="{ name:'home', query:{username:'yamada'} }">
yamada // このリンクをクリックすると/?username=yamadaに遷移
</router-link>
<router-link :to="{ name:'home', query:{username:'suzuki'} }">
suzuki // このリンクをクリックすると/?username=suzukiに遷移
</router-link>
<router-view></router-view>
</div>
</template>
src/Home.vue
<template>
<div>
<p>Username</p>
// ここでqueryで渡されたusernameが表示される
<p> {{ $route.query.username }} </p>
</div>
</template>
下記公式リファレンスを参考にしました
以上ですーー！
おやすみなさいぃぃ
