一、什么是路由
1、后端路由：對(duì)于普通的網(wǎng)站，所有的超鏈接都是URL地址，所有的URL地址都對(duì)應(yīng)服務(wù)器上的資源；
2、前端路由：對(duì)于單頁(yè)面應(yīng)用程序來(lái)說(shuō)，主要通過(guò)URL中的hash(#號(hào))來(lái)實(shí)現(xiàn)不同頁(yè)面之間的切換，同時(shí)，hash有一個(gè)特點(diǎn)：HTTP請(qǐng)求中不會(huì)包含hash相關(guān)的內(nèi)容，所以單頁(yè)面程序中的頁(yè)面跳轉(zhuǎn)主要用hash實(shí)現(xiàn)；
3、在單頁(yè)面應(yīng)用程序中，這種通過(guò)hash改變來(lái)切換頁(yè)面的方式，稱作前端路由（區(qū)別于后端路由）；
二、路由的基本使用
<!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是默認(rèn)提供的激活類名，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">注冊(cè)</a>-->
<!--官方不推薦用a標(biāo)簽來(lái)切換路由，推薦使用router-line-->
<!--router-link 默認(rèn)是a標(biāo)簽-->
<router-link class="pointer" to="/login" tag="span">登錄</router-link>
<router-link to="/register">注冊(cè)</router-link>
<!--這是vue-router提供的元素，專門(mén)用來(lái)當(dāng)做占位符的，將來(lái)路由規(guī)則匹配到的組件就會(huì)展示到這個(gè)router-view中去-->
<transition mode="out-in">
<router-view></router-view>
</transition>
</div>
<script>
var login = { //組件模板對(duì)象
template: '<h1>登錄組件</h1>'
};
var register = { //組件模板對(duì)象
template: '<h1>注冊(cè)組件</h1>'
};
/*創(chuàng)建一個(gè)路由對(duì)象，當(dāng)導(dǎo)入vue-router包之后，在window全局對(duì)象中，就有了一個(gè)路由的構(gòu)造函數(shù)，叫做VueRouter*/
//在new路由對(duì)象的時(shí)候，可以為構(gòu)造函數(shù)傳遞一個(gè)配置對(duì)象
var routerObj = new VueRouter({
//routes這個(gè)配置對(duì)象中的route表示【路由匹配規(guī)則】的意思
routes: [ //路由匹配規(guī)則
//每個(gè)路由規(guī)則都是一個(gè)對(duì)象，每個(gè)規(guī)則對(duì)象必須包含兩個(gè)必須的屬性
// 屬性1 是path 表示監(jiān)聽(tīng)哪個(gè)鏈接地址
// 屬性2 是component ，表示如果路由是前面匹配到的path，則展示component屬性對(duì)應(yīng)的那個(gè)組件
// 注意：component的屬性值，必須是一個(gè)組件模板對(duì)象，不能是組件的引用名稱
{path: '/', redirect: '/login'},//這里的redirect和Node中的redirect完全是兩碼事
{path: '/login', component: login},
{path: '/register', component: register}
],
linkActiveClass: 'myActive',//可以將默認(rèn)的router-link-active類名改為自定義的類名
});
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router: routerObj //將路由規(guī)則對(duì)象注冊(cè)到vm實(shí)例上，用來(lái)監(jiān)聽(tīng)URL地址的變化，然后展示對(duì)應(yīng)的組件
});
</script>
</body>
</html>
