[Vue.js]ルーティング


HTML

<body>
    <div id="app">
        <!-- router-linkは<a>として自動でレンダリングされる -->
        <router-link to="/top" >TOP</router-link>
        <router-link to="/users">USER</router-link>
        <!-- コンポーネントを実際に反映させる要素 -->
        <router-view></router-view>
    </div>

    <script src="https://unpkg.com/[email protected]"></script>
    <script src="https://unpkg.com/[email protected]"></script>

    <script src="js/main.js"></script>
</body>

Vue.js

//ルーターインスタンスを作成
var router = new VueRouter({
    routes:[
        {
            path:'/top',
            component:{
                template:'<h1>トップページです</h1>'
            }
        },

        {
            path:'/users',
            component:{
                template:'<h2>ユーザーページです</h2>'
            }
        },
    ]
})

//ルーターのインスタンスを渡す
var app = new Vue({
    router:router,
}).$mount('#app')