一、什么是路由
1、后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上的资源；
2、前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容，所以单页面程序中的页面跳转主要用hash实现；
3、在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；
二、路由的基本使用
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="lib/vue-2.6.10.js"></script>
<!--安装vue-router路由模块-->
<script src="lib/vue-router.js"></script>
<style>
.pointer {
cursor: pointer;
}
.router-link-active, .myActive { /*router-link-active是默认提供的激活类名，myActive是自己修改的激活类名*/
color: red;
font-weight: 800;
font-style: italic;
font-size: 80px;
text-decoration: underline;
background-color: green;
}
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateX(140px);
}
.v-enter-active,
.v-leave-active{
transition: .5s;
}
</style>
</head>
<body>
<div id="app">
<!-- <a href="#/login">登录</a>-->
<!-- <a href="#/register">注册</a>-->
<!--官方不推荐用a标签来切换路由，推荐使用router-line-->
<!--router-link 默认是a标签-->
<router-link class="pointer" to="/login" tag="span">登录</router-link>
<router-link to="/register">注册</router-link>
<!--这是vue-router提供的元素，专门用来当做占位符的，将来路由规则匹配到的组件就会展示到这个router-view中去-->
<transition mode="out-in">
<router-view></router-view>
</transition>
</div>
<script>
var login = { //组件模板对象
template: '<h1>登录组件</h1>'
};
var register = { //组件模板对象
template: '<h1>注册组件</h1>'
};
/*创建一个路由对象，当导入vue-router包之后，在window全局对象中，就有了一个路由的构造函数，叫做VueRouter*/
//在new路由对象的时候，可以为构造函数传递一个配置对象
var routerObj = new VueRouter({
//routes这个配置对象中的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',//可以将默认的router-link-active类名改为自定义的类名
});
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router: routerObj //将路由规则对象注册到vm实例上，用来监听URL地址的变化，然后展示对应的组件
});
</script>
</body>
</html>
