<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue路由</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const Login = {
template:'<div>我是登录</div>'
};
const Register = {
template:'<div>我是注册</div>'
};
const routes = [
{ path: '/login', component: Login },
{ path: '/register', component: Register }
]
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
Vue.component('Vroute',{
data(){
return {
};
},
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 {
};
},
template:'<Vroute/>',
router //使路由生效
});
</script>
</html>