JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.jsdelivr.net/vue/2.0.3/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/vue.router/2.0.1/vue-router.min.js"></script>
<div id="app">
<router-link to="/top">トップページ</router-link>
<router-link to="/users">ユーザー一覧ページ</router-link>
<router-link :to="{ name: 'user', params: { userId: 123 }}">ユーザー詳細ページ</router-link>
<router-view></router-view>
</div>
JavaScript
var User = {
template: `
<div class="user">
<h2>ユーザーIDは {{ $route.params.userId }} です。</h2>
<router-link :to="'/user/' + $route.params.userId + '/profile'">ユーザーのプロフィールページを見る</router-link>
<router-link :to="'/user/' + $route.params.userId + '/posts'">ユーザーの投稿ページを見る</router-link>
<router-view></router-view>
</div>
`
}
var UserProfile = {
template: `
<div class="user-profile">
<h3>こちらはユーザー {{ $route.params.userId }} のプロフィールページです。</h3>
</div>
`
}
var UserPosts = {
template: `
<div class="user-posts">
<h3>こちらはユーザー {{ $route.params.userId }} の投稿ページです。</h3>
</div>
`
}
// ルートオプションを渡してルーターインスタンスを生成します
var router = new VueRouter({
// 各ルートにコンポーネントをマッピングします
// コンポーネントはVue.extend() によって作られたコンポーネントコンストラクタでも
// コンポーネントオプションのオブジェクトでも構いません
routes: [
{
path: '/top',
component: {
template: '<div>トップページです。</div>'
}
},
{
path: '/users',
component: {
template: '<div>ユーザー一覧ページです。</div>'
}
},
{
path: '/user/:userId',
component: User,
name: 'user',
children: [
{
// /user/:userId/profile がマッチした時に
// UserProfileコンポーネントはUserコンポーネントの <router-view> 内部でレンダリングされます
path: 'profile',
component: UserProfile
},
{
// /user/:userId/posts がマッチした時に
// UserPostsコンポーネントはUserコンポーネントの <router-view> 内部でレンダリングされます
path: 'posts',
component: UserPosts
}
]
}
]
})
// ルーターのインスタンスをrootとなるVueインスタンスに渡します
var app = new Vue({
router: router
}).$mount('#app')