<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/vue-2.4.0.js"></script>
<script type="text/javascript" src="js/vue-router-3.0.1.js"></script>
</head>
<body>
<div class="app">
<router-link to="/login">登录 </router-link>
<router-link to="/register">注册</router-link>
<!-- 容器-->
<router-view></router-view>
</div>
<script>
var login={
template:'<h1>欢迎进入登录界面</h1>'
}
var register={
template:'<h1>欢迎进入注册界面</h1>'
}
var obj1=new VueRouter({
routes:[
{path:'/',redirect:'/login'},
{path:'/login',component:login},
{path:'/register',component:register}
]
})
new Vue({
el:'.app',
data:{},
methods:{},
router:obj1,//将路由规则对象,注册到vm实例上用来监听url地址的变化,然后展示对应的组件
watch:{
//this.$route.path
'$route.path':function (new1,old) {
console.log(new1,old);
}
}
})
</script>
</body>
</html>