<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/js/vue.js"></script>
<!-- 第一步：安装 vue-router -->
<script src="../lib/js/vue-router.js"></script>
<!-- -->
<style>
/**
第一种方法：使用原生提供的类 加样式
*/
.router-link-active,
/**
第二种方法：使用自己定义的类 加样式
*/
.myActive{
color: #204d74;
font-weight: 800;
font-style: italic;
font-size: 60px;
background-color: yellow;
}
/* 组件切换动画样式 */
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateX(200px);
}
.v-enter-active,
.v-leave-active{
transition: all 0.5s linear;
}
</style>
</head>
<body>
<div id="app">
<!-- <a href="#/login">登录</a>-->
<!-- <a href="#/register">注册</a>-->
<!-- router-link 的使用
router-link 默认渲染为一个 a 标签，也可以使用 tag='span' 渲染为指定的标签 -->
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<!-- router-view 是由 vue-router 提供的，专门用来当作占位符的，将来路由规则匹配到的组件
就会展示到这个 router-view 中去-->
<!-- 为组件切换添加动画 -->
<transition mode="out-in">
<router-view></router-view>
</transition>
</div>
<script>
// 创建组件模板对象
const login = {
template:'<h1>login组件</h1>'
};
const register = {
template:'<h1>register组件</h1>'
};
/**
* vue-router 基本使用
* @type {VueRouter}
*/
// 创建一个路由对象，当导入 vue-router 包之后，在 window 全局对象中，就有了一个
// 路由的构造函数，叫作 VueRouter
// 在 new 路由对象的时候，可以为 构造函数传递一个配置对象
const routerObj = new VueRouter({
// route // 这个配置对象中的 route 表示【路由匹配规则】
routes:[ // 路由匹配规则
// 请求重定向，这里的 redirect 和 node 中的 redirect 完全是两码事
{ path:'/',redirect:'/login'},
// 每个路由规则都是一个对象，这个对象身上有两个必须的属性
// 属性1. path，表示监听哪个路由链接地址
// 属性2. component，表示如果路由是前面匹配到的path，则展示 component属性对应的那个组件
// 注意：component的属性值，必须是一个组件的模板对象，不能是组件的引用名称
{ path:'/login',component:login },
{ path:'/register',component:register }
],
/**
* 修改高亮的第二种方式，自己定义类
*/
linkActiveClass:'myActive'
});
// 创建 vue 实例
const vm = new Vue({
el:'#app',
data:{},
methods:{},
// 将路由规则对象注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件
router:routerObj
})
</script>
</body>