一世澜、什么是路由？
網(wǎng)絡(luò)原理中姻几，路由指的是根據(jù)上一接口的數(shù)據(jù)包中的IP地址宜狐，查詢(xún)路由表轉(zhuǎn)發(fā)到另一個(gè)接口，它決定的是一個(gè)端到端的網(wǎng)絡(luò)路徑蛇捌。
web中抚恒，路由的概念也是類(lèi)似，根據(jù)URL來(lái)將請(qǐng)求分配到指定的一個(gè)'端'络拌。(即根據(jù)網(wǎng)址找到能處理這個(gè)URL的程序或模塊)俭驮。
使用vue.js構(gòu)建項(xiàng)目，vue.js本身就可以通過(guò)組合組件來(lái)組成應(yīng)用程序；當(dāng)引入vue-router后混萝，我們需要處理的是將組件(components)映射到路由(routes)遗遵，然后在需要的地方進(jìn)行使用渲染。
1.概念：路由其實(shí)就是指向的意思逸嘀，當(dāng)我們點(diǎn)擊home按鈕時(shí)车要，頁(yè)面中就要顯示home的內(nèi)容，點(diǎn)擊login按鈕時(shí)崭倘，頁(yè)面就顯示login的內(nèi)容翼岁，也可以說(shuō)是一種映射，所有在頁(yè)面上有兩個(gè)部分司光，一個(gè)是點(diǎn)擊部分琅坡，一個(gè)是顯示部分。
2.路由中有三個(gè)基本的概念残家，route,routes,router榆俺。
<1>route:它是一個(gè)路由，是一個(gè)單數(shù)坞淮，點(diǎn)擊Home按鈕->Home內(nèi)容
<2>routes:它是一組路由茴晋，把每一條路由組合起來(lái)，串接起來(lái)形成一個(gè)數(shù)組碾盐；[{home按鈕=>home內(nèi)容}晃跺，{about按鈕=>about內(nèi)容}]
<3>router:它是一個(gè)機(jī)制揩局，相當(dāng)于一個(gè)管理者毫玖，來(lái)管理所有路由；
<4>客戶(hù)端中的路由原理:實(shí)際上就是dom 元素的顯示和隱藏凌盯。當(dāng)頁(yè)面中顯示home 內(nèi)容的時(shí)候付枫，about 中的內(nèi)容全部隱藏，反之也是一樣驰怎〔玻客戶(hù)端路由有兩種實(shí)現(xiàn)方式：基于hash 和基于html5 history api.
二、基本使用
<1>下載：
npm install vue-router --save
<2>引用：在router下面的index.js中
//index.js
import Vue from "vue"
import VueRouter from "vue-router"
Vue.use(VueRouter)
//創(chuàng)建路由對(duì)象
export default new VueRouter({
})
<3>路由跳轉(zhuǎn)方式:
router-link
to
幫助我們生成a標(biāo)簽的href
錨點(diǎn)值代碼維護(hù)不方便县忌，如果需要改變錨點(diǎn)值名稱(chēng)
則需要改變 [使用次數(shù) + 1（配置規(guī)則）] 個(gè)地方的代碼
3.1靜態(tài)路由跳轉(zhuǎn)
<router-link to="/">首頁(yè)</router-link>
3.2動(dòng)態(tài)路由跳轉(zhuǎn)
<router-link :to='{path:"/"}'>首頁(yè)</router-link>
3.3編程式導(dǎo)航
this.$router.push({path:"/"})
<4>命名路由
1:給路由對(duì)象一個(gè)名稱(chēng) { name:'home',path:'/home',component:Home}
2:在router-link的to屬性中描述這個(gè)規(guī)則
<router-link :to="{name:'home'}>首頁(yè)</router-link>"
通過(guò)名稱(chēng)找路由對(duì)象掂榔，獲取其path，生成自己的href
極大的降低維護(hù)成本症杏，錨點(diǎn)值改變只用在main.js中改變path屬性即可
<5>嵌套路由
import Vue from "vue"
import VueRouter from "vue-router"
import Tran from "../components/transition.vue"
import TranOne from "../components/transitionone.vue"
import About from "../components/about.vue"
import First from "../components/aboutfirst.vue"
import Two from "../components/abouttwo.vue"
Vue.use(VueRouter)
export default new VueRouter({
mode:"history",
routes:[
{
path:"/",
component:Tran,
name:"index",
},{
path:"/one",
name:"one",
component:TranOne
},{
path:"/about",
name:"about",
component:About,
children:[
{
path:"/about/first",
component:First
},{
path:"/about/two",
component:Two
}
]
}
}
]
})
<6>路由重定向和別名
//redirect alias
export default new VueRouter({
mode:"history",
routes:[
{
path:"/",
component:Tran,
name:"index",
redirect:"/about",
alias:"/index"
},{
path:"/about",
component:About
}
})
<7>路由跳轉(zhuǎn)模式
// hash histroy(html5)
<8>路由導(dǎo)航首位
分類(lèi):
全局導(dǎo)航守衛(wèi):
全局前置導(dǎo)航守衛(wèi)
router.beforeEach((to,from,next)=>{
//to 去向的目標(biāo)對(duì)象
//form 來(lái)自的對(duì)象
//next 繼續(xù)執(zhí)行后續(xù)代碼.必須執(zhí)行next
})
全局后置導(dǎo)航守衛(wèi)
router.afterEach((to,from)=>{
})
路由獨(dú)享守衛(wèi)
export default new VueRouter({
mode:"history",
routes:[
{
path:"/",
component:Tran,
name:"index"
},{
path:"/about",
component:About,
//路由獨(dú)享守衛(wèi)
beforeEnter:()=>{
}
}
組件內(nèi)的導(dǎo)航守衛(wèi)
<script>
export default {
name:"",
data(){
return {
}
},
beforeRouteEnter(to,from,next){
//進(jìn)入組件時(shí)調(diào)用
},
beforeRouteUpdate(to,from,next){
// 在當(dāng)前路由改變装获，但是該組件被復(fù)用時(shí)調(diào)用
// 舉例來(lái)說(shuō)，對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id厉颤，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候穴豫，
// 由于會(huì)渲染同樣的 Foo 組件，因此組件實(shí)例會(huì)被復(fù)用逼友。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用精肃。
// 可以訪問(wèn)組件實(shí)例 `this`
},
beforeRouteleave(to,from,next){
//離開(kāi)組件時(shí)調(diào)用
}
}
</script>
后續(xù)會(huì)繼續(xù)完善剩下內(nèi)容,如果感覺(jué)有用,請(qǐng)留下寶貴的一個(gè)贊!!!!
