<!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="./lib/vue-2.4.0.js"></script>
<!-- 1. 安装 vue-router 路由模块 -->
<script src="./js/vue-router-3.0.1.js"></script>
<style>
.router-link-active,
.myactive {
color: red;
font-weight: 800;
font-style: italic;
font-size: 80px;
text-decoration: underline;
">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">
<!-- router-link 默认渲染为一个 a 标签 -->
<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 ={
templater:'<h1>登录组件</h1>'
}
var register ={
templater:'<h1>注册组件</h1>'
}
/* Var.component('login',{
template:'<h1> 登录组件 </h1>'
})
*/
//2.创建一个路由对象，当导入 Vue-router 包之后，在window 全局对象中，就有了一个路由的构造函数，叫做 VueRouter
//在 new 路由对象的时候，可以为构造函数，传递一个配置对象
var routerObj=new VueRouter({
//routes 这个配置对象中的 route 表示【路由匹配规则】的意思
routes:[ //路由匹配规则
//每个路由规则都是一个对象，这个规则对象身上有两个必须的属性
//属性1：是 path ,表示监听 哪个路由链接地址；
//属性2：是 component ,表示如果路由是前面匹配到的 path ,则展示 component 属性对应的那个组件
//注意： 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:{
},
router:routerObj //将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件
});
</script>
</body>
</html>