環境 windows10
Vue routet を CDNを用いて行います。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vue Router</title>
<!-- Vue Router のCDNの読み込み -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>{{ title }}</h1>
<nav>
<router-link to="/">ホーム</router-link>
<router-link to="/news">ニュース</router-link>
<router-link to="/about">About</router-link>
</nav>
<router-view/>
</div>
<!-- javascriptの記述 -->
<script>
// コンポーネントの設定
const Home = { template: '<div>初めてのVue Resource</div>'}
const News = { template: '<div>今週のニュースは....</div>'}
const About = { template: '<div>会社までのアクセス方法は....</div>'}
// ルーティングの設定
const router = new VueRouter({
routes : [
{path:'/', component : Home},
{path:'/news',component: News},
{path:'/about',component: About}
]
})
//Vueインスタンスへrouterインスタンスを渡す
var app = new Vue({
el: '#app',
data:{
title: 'Vue Resource',
},
router,
});
</script>
</body>
</html>
とりあえず動かしたい人はコピペしてください。
なぜか公式のURLコピペしても動かなかったので参考までに。
参考
https://reffect.co.jp/vue/first-time-vue-router
細かい解説は
https://qiita.com/yuta-38/items/889f5edc5a0075aba274