Vue で ルーティングを設定する
Vue.js
Published: 2019-11-04

やったこと

Vue.js でルーティングを設定します。

確認環境

Console Log

Vue.version
"2.5.17"
VueRouter.version
"3.0.1"

調査

<!DOCTYPE html>
<html>
  <body>
    <div id="app">
      <router-link to="/sample1">sample1</router-link>
      <router-link to="/sample2">sample2</router-link>
      <router-view></router-view>
    </div>
    <script src="https://unpkg.com/vue@2.5.17"></script>
    <script src="https://unpkg.com/vue-router@3.0.1"></script>

  <script>
    var router = new VueRouter({
      routes: [
        {
          path: '/sample1',
          component: {
            template: '<div>sample1 page</div>'
          }
        },
        {
          path: '/sample2',
          component: {
            template: '<div>sample2 page</div>'
          }
        },
      ]
    })
    var app = new Vue({
      router: router
    }).$mount('#app')
  </script>
  </body>
</html>

参考