https://router.vuejs.org/ja/guide/
VueRouterの「基本的な使い方」を見ながらサンプルをつくってみた。
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<style>
#title {
background-color:#1ce;
}
</style>
</head>
<body>
<div id="app">
<div id="title"><a href="/vrouter.html">GAME</a></div>
<p>
<router-link to="/gacha" class="btn btn-primary">gacha</router-link>
<router-link to="/chara" class="btn btn-primary">chara</router-link>
<button class="btn btn-primary" v-on:click="viewItem">item</button>
<router-link to="/goods" class="btn btn-primary">goods</router-link>
<router-link to="/tool" class="btn btn-primary">tool</router-link>
<router-link to="/xxx" class="btn btn-primary">xxx</router-link>
</p>
<router-view></router-view>
</div>
<script>
const Gacha = { template: '<div>ガチャ</div>' }
const Chara = {
props: ['charas'],
template: `
<div>
<p>キャラ</p>
<div v-for="chara in charas">
{{chara.name}} Lv.{{chara.level}}
<router-link :to="{name: 'chara-detail', params: {name: chara.name}}" class="btn btn-primary">detail</router-link>
</div>
</div>
`
}
const CharaDetail = {
props: ['name'],
template: `
<div>
<p>キャラ詳細:{{name}}</p>
<router-link :to="{name: 'chara-profile', params: {name: name}}" class="btn btn-primary">profile</router-link>
<router-link :to="{name: 'chara-status', params: {name: name}}" class="btn btn-primary">status</router-link>
<router-view></router-view>
</div>
`
}
const CharaProfile = {template: '<p>Profile</p>'};
const CharaStatus = {template: '<p>Status</p>'};
const Item = { template: '<div>アイテム</div>' }
const NotFound = { template: '<div>404</div>' }
const router = new VueRouter({
routes: [
{ path: '/gacha', component: Gacha },
{ path: '/chara',
component: Chara,
props: {
charas: [
{name: 'ドッグ', level: 3},
{name: 'モンキー', level: 5},
{name: 'バード', level: 4}
]
}
},
{ path: '/chara/:name',
name: 'chara-detail',
component: CharaDetail,
props: true,
children: [
{
path: 'profile',
name: 'chara-profile',
component: CharaProfile
},
{
path: 'status',
name: 'chara-status',
component: CharaStatus
},
]
},
{ path: '/item', component: Item, alias: '/goods' },
{ path: '/tool', redirect: '/item' },
{ path: '/*', component: NotFound }
]
})
const app = new Vue({
router,
methods: {
viewItem: function() {
router.push('/item')
}
}
}).$mount('#app')
</script>
</body>
</html>