Vue Router の始め方 (CDN+simple vue.js)

【追記】2019.1.25

page.js のテンプレートの中は、一つ大きなの <div></div> で囲んだ中に書く
複数のルートは持てないので注意

手順

1. index.html の修正 <body></body>タグ末尾に追記

2. page.js の作成

const Home = { template:

`<div>

write something

</div>`

}

const Foo = { template:

`<div>

write something

</div>`

}

const Bar = { template:

`<div>

write something

</div>`

}

const routes = [

{ path: '/', component: Home },

{ path: '/foo', component: Foo },

{ path: '/bar', component: Bar }

]

const router = new VueRouter({

routes: routes

})

3. main.js の修正 2箇所

new Vue({

el: '#app',

router,

data: {

message: 'Hello Vue.js'

}

}).$mount('#app')

4. index.html の修正 本体部分

<v-app>

<div>

<router-link to="/">Go to Home</router-link>

<router-link to="/foo">Go to Foo</router-link>

<router-link to="/bar">Go to Bar</router-link>

</div>

<router-view></router-view>

</v-app>

</div>

Vue Router の始め方 (CDN+simple vue.js)

【 追記 】2019.1.25

手順

【追記】2019.1.25