<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
<!-- 1. 安装vue-router 路由模块 -->
<script src="js/vue-router-3.0.1.js"></script>
<style>
/* 实现路由高亮 */
.router-link-active,.myactive{
color:red;
font-size:80px;
font-weight: 800;
font-style: italic;
text-decoration: underline;
background-color: green;
}
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateX(140px);
}
.v-enter-active,
.v-leave-active{
transition: all 0.5s ease;
}
</style>
</head>
<body>
<div id ="app">
<!-- <a href="#/login">登录</a>
<a href="#/register">注册</a> -->
<!-- router-link 默认渲染a标签 -->
<router-link to='/login'></router-link>
<router-link to='/register'></router-link>
<!--渲染成span标签 登录也可点-->
<router-link to='/login' tag='span'></router-link>
<router-link to='/register'></router-link>
<!-- 这是vue-router 提供的元素，专门用来当做占位符的，将来路由规则匹配到的组件久惠展示到router-view中，所以可以把 router-view认为是一个占位符。-->
<transition mode="out-in">
<router-view></router-view>
</transition>
</div>
<script>
//组件的模板对象
var login={
template:'<h1>登录组件</h1>'
}
var register={
template:'<h1>注册组件</h1>'
}
// 2.创建一个路由对象，当导入vue-router包之后，在window全局对心中就有了一个路由的构造函数，叫做VueRouter
//在new路由对象的时候，可以为构造函数传递一个配置对象
var routerObj=new VueRouter({
//route //这个配置对象中的router表示 【路由匹配规则】
routers:[ //routers 路由匹配规则集合
//每个路由规则，都是一个对象，这个规则对象上有两个必须的属性
//属性1：path，表示监听 哪个路由地址
//属性2：component, 表示 如果路有时前面匹配到的path，则展示compnent属性对应的那个组件
//注意：component的属性值，必须是一个组件的模板对象，不能是组件的引用名称
// {path:"/",component:login}, //默认展示某个组件，但是不推荐
{path:"/",redirect:'/login'}, //重定向，这里的redirect和Node中的redirect 完全是两码事
// {path:"/login",component:login},
{path:"/register",component:register},
],
linkActiveClass:'myactive'
})
//创建Vue实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
roueter:routerObj //将路由规则对象注册到vm实例中，用来监听url地址变化然后展示对相应的组件
});
</script>
</body>
</html>
