17、Vue-router基本使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>行找的皮卡丘</title>
</head>
<body>
<div id="app">
</div>
</body>
<script type="text/javascript" src="js/vue.min.js">
</script>
<script type="text/javascript" src=".\node_modules\vue-router\dist\vue-router.js">
</script>
<script type="text/javascript">
var Login={
template:`
<div>我是登陆页面</div>
`,
};
var Register={
template:`
<div>我是注册页面</div>
`,
};
var router = new VueRouter({
routes:[
{
path:'/login',
component:Login,
},
{
path:'/Register',
component:Register,
},
]
});
var App={
template:`
<div>
<router-link to='/login'>登陆页面</router-link>
<router-link to='/register'>注册页面</router-link>
<router-view></router-view>
</div>
`,
}
new Vue({
el: '#app',
data() {
return {
}
},
components:{
App
},
router:router,
template:`
<App/>
`,
});
</script>
</html>