<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../vue/dist/vue.js"></script>
<script type="text/javascript" src="node_modules/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/javascript">
Vue.use(VueRouter);
var Home = {
template:`
<div>首頁內容<br/>
<router-link to="/home/music">音樂</router-link>
<router-link to="/home/movie">電影</router-link>
<router-view></router-view>
</div>
`
};
var Music = {
template:`
<div>音樂界面加載</div>
`
};
var Movie = {
template:`
<div>電影界面加載</div>
`
};
var router = new VueRouter({
routes:[
{
path:'/home',
name:'home',
component:Home,
children:[
{
path: 'music',
component: Music
},{
path:'movie',
component:Movie
}
]
}
]
});
var App = {
template: `
<div>
<router-link v-bind:to="{name:'home'}">首頁</router-link>
<router-view></router-view>
</div>
`
};
new Vue({
el:'#app',
data(){
return{}
},
components:{
App:App
},
router:router,
template:`<App />`
});
</script>
</html>
