.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;
}
{{message}}
let login={
template:'
登陆组件
'}
let register={
template:'
注册组件
'}
//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地址变化,用来展示对应的组件
})