<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<!--1.安装vue-router路由模块-->
<script src="https://unpkg.com/vue-router@3.1.3/dist/vue-router.js"></script>
<style>
.router-link-active{
color:red;
font-weight:bold;
}
.myactive{
color:blue;
font-size:30px;
}
.v-enter,
.v-leave-to{
opacity:0;
transform:translateX(140px);
}
.v-enter-active,
.v-leave-active{
transition:all 0.5s ease;
}
</style>
</head>
<div id="app">
<p>{{message}}</p>
<!--<a href="#/login">登录</a>-->
<!--<a href="#/register">注册</a>-->
<!--router-link默认渲染为一个a标签，加了tag="span"之后，则会渲染为一个span标签-->
<router-link to="/login" tag="span">登录</router-link>
<router-link to="/register">注册</router-link>
<!--这是vue-router提供的元素，专门用来当做占位符的，将来路由规则匹配到的组件，就会展示到这个touter-view中去，所以我们可以吧router-view认为是一个占位符-->
<transition mode="out-in">
<router-view></router-view>
</transition>
</div>
</body>
<script>
let login={
template:'<h1>登陆组件</h1>'
}
let register={
template:'<h1>注册组件</h1>'
}
//2.创建一个路由对象，当导入vue-router包之后，在window全局对象中，就有了一个路由的构造函数，叫做VueRouter
//在new路由对象的时候，可以为构造函数传递一个配置对象
let routerObj=new VueRouter({
// route 这个配置对象中的route表示路由匹配规则的意思
routes:[//路由匹配规则
//每个路由规则都是一个对象，这个规则对象身上有两个必须的属性
//属性1是path，表示监听那个路由连接的地址
//属性2是component，表示如果路由是前面匹配到的path，则展示component属性对应的那个组件
//注意：component的属性值，必须是一个组件的模板对象，不能是组件的引用名称；
{path:"/",redirect:'/login'},//这里的redirect和Node中的redirect完全是两码事
{path:'/login',component:login},
{path:'/register',component:register}
],
linkActiveClass:'myactive'
});
let app=new Vue({
el:'#app',
data:{
message:'Hello World'
},
router:routerObj//将路由规则对象注册到vm实例上，用来监听URL地址变化，用来展示对应的组件
})
</script>
</html>
