<!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 Login = {
template:`
<div>登錄頁面</div>
`
};
var Register = {
template:`
<div>註冊頁面</div>
`
};
var router = new VueRouter({
routes:[
{
path:'/login',
name:'login',
component:Login
},
{
path:'/register',
name:'register',
component:Register
}
]
});
var App = {
template: `
<div>
<router-link v-bind:to="{name:'login'}">註冊</router-link>
<router-link v-bind:to="{name:'register'}">登錄</router-link>
<router-view></router-view>
</div>
`
};
new Vue({
el:'#app',
data(){
return{}
},
components:{
App:App
},
router:router,
template:`<App />`
});
</script>
</html>
