簡(jiǎn)介
前端路由簡(jiǎn)單的說(shuō)辆沦，就是業(yè)內(nèi)的跳轉(zhuǎn)
進(jìn)行不同組件之間的切換
使用
導(dǎo)入包
-
創(chuàng)建一個(gè)路由對(duì)象友瘤，當(dāng)導(dǎo)入包之后权烧，就有一個(gè)路由的構(gòu)造函數(shù)眯亦，VueRouter，在創(chuàng)建路由對(duì)象時(shí)般码，可以傳入一個(gè)配置對(duì)象妻率，這個(gè)匹配對(duì)象中的route表示（路由匹配規(guī)則）的意思
-
路由匹配規(guī)則，每個(gè)路由規(guī)則都是一個(gè)對(duì)象板祝，這個(gè)規(guī)則對(duì)象宫静，身上都必須偶兩個(gè)屬性
path：表示監(jiān)聽(tīng)那個(gè)路由連接地址
-
component：表示如果路由是起那么匹配到的path，則暫時(shí)component屬性對(duì)應(yīng)的那個(gè)組件券时，這個(gè)地方必須是一個(gè)組件的對(duì)象孤里，而不是組件的引用名稱(chēng)
例如使用var login={
? template:""
}這個(gè)login是對(duì)象
Vue.component('login',{
? template:''
})，這個(gè)login就是一個(gè)名稱(chēng)
-
將路由規(guī)則對(duì)象注冊(cè)到Vue實(shí)例上橘洞，用來(lái)監(jiān)聽(tīng)URL地址 捌袜，然后展示對(duì)應(yīng)的組件
也就是說(shuō)
- 導(dǎo)包
- 創(chuàng)建路由規(guī)則對(duì)象
- 將路由規(guī)則對(duì)象注冊(cè)到Vue實(shí)例中
- 綁定到對(duì)應(yīng)的vm實(shí)例上
- 將router-view注冊(cè)到頁(yè)面中
注意，第二步炸枣，創(chuàng)建路由對(duì)象時(shí)虏等，其中的路由規(guī)則數(shù)組是“routes”
第四步，在將路由規(guī)則綁定到vm實(shí)例時(shí)抛虏，是router
<script src="../../js/vue-router.js"></script>-
var routerObi=new VueRouter({ routes:[ {path:'',component:}, ] });注意博其，path是地址欄顯示的數(shù)據(jù)，component是組件對(duì)應(yīng)的對(duì)象迂猴，不是字符串
OK
router:routerObj<router-view></router-view>
注意Vue中的路由是基于hash的慕淡，所以對(duì)它的調(diào)用的路由路徑前面需要加上“#/XXX”
<a href="#/login">登錄</a>
<a href="#/register">注冊(cè)</a>
但是不推薦使用a連接的方式進(jìn)行跳轉(zhuǎn)，Vue封裝了一個(gè)自定義的組件沸毁，默認(rèn)渲染一個(gè)a標(biāo)簽峰髓，但是可以通過(guò)tag屬性傻寂，傳入標(biāo)簽的值來(lái)渲染別的標(biāo)簽
<router-link to="/login">登錄</router-link>
<router-link to="/register">注冊(cè)</router-link>
但是需要注意的是這個(gè)標(biāo)簽需要在vue對(duì)應(yīng)實(shí)例標(biāo)明的區(qū)域使用
重定向
也就是網(wǎng)頁(yè)默認(rèn)的url地址欄中的后綴，為了使一開(kāi)始有一個(gè)固定的地址對(duì)應(yīng)的組件携兵，所以可以加上一個(gè)默認(rèn)情況下的重定向?qū)傩约碴诼酚梢?guī)則中加上一個(gè)規(guī)則
{path:'/',redirect:'/login'}
這樣就可以值初始化的時(shí)候默認(rèn)進(jìn)入login的組件，并且頁(yè)面顯示地址欄也是對(duì)應(yīng)的path
選中高亮
對(duì)于router有一個(gè).router-link-active徐紧，當(dāng)選中一個(gè)路由時(shí)静檬，就會(huì)默認(rèn)給該路由的組件中添加上這個(gè)類(lèi)，所以并级，我們只用給這個(gè)類(lèi)添加一些樣式拂檩，就可以實(shí)現(xiàn)點(diǎn)擊高亮或者其他的樣式
<style>
.router-link-active{
font-size:80px;
}
</style>
可以通過(guò)在創(chuàng)建路由對(duì)象時(shí)，在routes同級(jí)修改linkActiveClass屬性值來(lái)修改使用哪一個(gè)類(lèi)可以使選中高亮
var routerObj=new VueRouter({
routes:[
{path:'/',redirect:'/login'},
{path:'/login',component:login},
{path:'/register',component:register},
],
linkActiveClass:'myRouterActive'
});
路由添加動(dòng)畫(huà)
還是可以直接包裹在transition標(biāo)簽中
<transition enter-active-class="animated bounce">
<router-view></router-view>
</transition>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../js/vue.js"></script>
<script src="../../js/vue-router.js"></script>
<style>
.myRouterActive {
font-size: 80px;
}
</style>
<link rel="stylesheet" href="../../css/animate.css">
</head>
<body>
<div id="app">
<router-link to="/login">登錄</router-link>
<router-link to="/register">注冊(cè)</router-link>
<transition enter-active-class="animated bounce">
<router-view></router-view>
</transition>
</div>
<script>
var login = {
template: '<h1>登錄組件</h1>'
}
var register = {
template: '<h1>注冊(cè)組件</h1>'
}
var routerObj = new VueRouter({
routes: [
{path: '/', redirect: '/login'},
{path: '/login', component: login},
{path: '/register', component: register},
],
linkActiveClass: 'myRouterActive'
});
var vm = new Vue({
el: "#app",
data: {},
router: routerObj
})
</script>
</body>
</html>
路由點(diǎn)擊觸發(fā)切換頁(yè)面的原理是：
點(diǎn)擊按鈕觸發(fā)地址欄修改成XXX#/XXX嘲碧，地址的修改觸發(fā)路由稻励，讓路有監(jiān)聽(tīng)到，是路由進(jìn)行路由匹配愈涩，看路由的[]中有沒(méi)有對(duì)應(yīng)的path望抽，如果有，就獲取對(duì)應(yīng)的component值指向?qū)?yīng)的組件履婉，從而顯示其對(duì)應(yīng)的組件信息
