路由

• 一個(gè)路由就是一組映射關(guān)系（key-value）key為路徑。在前端路由中，value是component，用于改變頁面展示內(nèi)容，當(dāng)瀏覽器路徑改變時(shí)對應(yīng)組件就會(huì)顯示；在后端路由中value是function，用于處理客戶端請求。

Vue-Router

vue的一個(gè)專門用來實(shí)現(xiàn)SPA應(yīng)用的插件庫。

單頁面web應(yīng)用SPA single page web application

整個(gè)應(yīng)用只有一個(gè)完整頁面
點(diǎn)擊頁面中的導(dǎo)航鏈不會(huì)刷新頁面，只會(huì)做頁面的局部更新
數(shù)據(jù)需要通過Ajax請求獲取

路由實(shí)現(xiàn)

路由局部組件一般放在page文件夾中，配置的路由一般放置在routers文件夾中
通過切換隱藏路由組件，默認(rèn)是銷毀，需要是時(shí)候再進(jìn)行掛載
每個(gè)組件都有自己的$route屬性，來存放自己的路由信息
整個(gè)組件只有一個(gè)router，可以通過組件的$router屬性獲取到
$router是用來操作路由，$route是用來獲取路由信息
$router是VueRouter的一個(gè)實(shí)例，他包含了所有的路由，包括路由的跳轉(zhuǎn)方法，鉤子函數(shù)等，也包含一些子對象（例如history）
$route是一個(gè)跳轉(zhuǎn)的路由對象（路由信息對象），每一個(gè)路由都會(huì)有一個(gè)$route對象，是一個(gè)局部的對象。

• 安裝vue-router
  vue2如果安裝路由插件要用npm install vue-router@3如果backage.json文件中有vue-router依賴說明安裝成功。
  
  backage.json文件vue-router依賴

-編寫router配置項(xiàng)
vue-router報(bào)錯(cuò)文件名后容易抽風(fēng)，重新啟動(dòng)一下本地服務(wù)器就好了

import VueRouter from 'vue-router'//引入vuerouter
import 路由組件 from '地址'
//創(chuàng)建router實(shí)例，管理路由規(guī)則
const router =new VueRouter({
  routers:[
    {
      path:'組件地址'，
      component:組件聲名
    }，
    {
      path:'組件地址'，
      component:組件聲名
    }
  ]
})
//暴露router
export default router

• 聲明式路由導(dǎo)航：實(shí)現(xiàn)路由切換用router-link標(biāo)簽，to屬性為目標(biāo)地址
• 指定展示位，router-view標(biāo)簽

children 多級路由

routers:[
  {
    path:'組件地址'，
    component:組件聲名，
  }，
  {
    path:'組件地址',
    component:組件地址,
    children:[
    {
      path:'二級組件地址',//此處寫地址不要帶斜杠
      component:二級組件聲名,
     },
    ]
  }
]

跳轉(zhuǎn)，要寫完整路徑
<ronuter-link to='/一級路由組件/二級路由組件'><router-link/>

query參數(shù)

傳遞參數(shù)

<router-link
  :to="{
    path:'路由組件地址'，
    query:{
      id:m.id,
      title:m.title
    }
  }"
>
<router-link/>

接收參數(shù)，query參數(shù)可以不再路由中配置直接調(diào)用

$route.query.id
$route.query.tilte

命名路由

命名路由可以簡化路由跳轉(zhuǎn)，在路由規(guī)則中配置name屬性給路由命名。
簡化后，在router-link標(biāo)簽的to屬性中使用對象寫法直接賦值{name:'路由名'}。

Params參數(shù)

在routers實(shí)例中，配置路由規(guī)則，聲明接受params參數(shù)。

{
path:'地址',
component:組件聲明,
  children:[
  mame:'路由命名',
  path:'地址/:屬性名/:屬性名？'//使用占位符聲明接受params參數(shù)，在值后加上問號，可以保證不傳值的情況下，URL不會(huì)出現(xiàn)問題
  component:組件聲明
  ]
}

• 參數(shù)傳遞
  路由攜帶params參數(shù)時(shí)，若使用to的對象寫法，則不能使用path配置項(xiàng)，必須使用name配置項(xiàng)

<router-link
  :to='{
    name:'路由名',
    params:{
      屬性名:屬性值,
    }
  }'
>
</router-link>

• 接受參數(shù)
  $route.params.屬性名

路由傳參兩種方法，query和params配置項(xiàng)區(qū)別
query使用path傳參，params使用name傳參。
路由傳參三種寫法：

字符串 模板字符串 對象

路由props配置

props值為函數(shù)，接受params屬性，該函數(shù)return返回的對象中沒一組key-value都會(huì)通過props傳給該路由組件

前端路由ky鍵值對應(yīng)：key,URL，地址欄中的路徑；value，相應(yīng)的路由組件。

路由跳轉(zhuǎn) replace方法

replace控制路由跳轉(zhuǎn)時(shí)操作瀏覽器歷史紀(jì)錄和模式
瀏覽器的歷史紀(jì)錄有兩種寫入方法：push和replace
push是追加歷史紀(jì)錄；replace是替換當(dāng)前記錄，路由跳轉(zhuǎn)時(shí)默認(rèn)為push方法。
<router-link :replace='true'></router-link>簡寫<router-link replace></router-link>

瀏覽記錄本質(zhì)是一個(gè)棧，默認(rèn)為push，點(diǎn)開新頁面就會(huì)在棧頂追加一個(gè)地址，后退，棧頂指針向下移動(dòng)，改為replace就是不追加，將棧頂?shù)刂诽鎿Q。

編程式路由導(dǎo)航

路由跳轉(zhuǎn)兩種方式：

聲明式導(dǎo)航，利用router-link標(biāo)簽to屬性實(shí)現(xiàn)路由跳轉(zhuǎn)
編程式導(dǎo)航，利用$router.push||replece方法實(shí)現(xiàn)路由跳轉(zhuǎn)

不借助router-link標(biāo)簽實(shí)現(xiàn)路由跳轉(zhuǎn)，讓路由更加靈活
在輸入類標(biāo)簽中綁定一個(gè)路由跳轉(zhuǎn)事件，在methods實(shí)例中聲明該事件，在路由跳轉(zhuǎn)函數(shù)中配置路由地址和傳遞參數(shù)

this.$router.push({})//和to屬性相同
this.$router.replace({})
this.$router.forward()//前進(jìn)
this.$router.back()//后退
this.$router.go(n)//n為正數(shù)前進(jìn)，n為負(fù)數(shù)后退

編程式導(dǎo)航跳轉(zhuǎn)到當(dāng)前路由，參數(shù)不變，多次執(zhí)行會(huì)拋出Navigation Duplicated的錯(cuò)誤警告。

原因：push方法是一個(gè)promise，promise需要傳遞成功和失敗兩個(gè)參數(shù)，聲明式導(dǎo)航在底層已經(jīng)寫好。
方法：push是VueRouter.Prototype的一個(gè)方法，在router中的index中重寫即可。

//1、先把VueRouter原型對象的push，保存一份
let originPush = VueRouter.prototype.push;
//2、重寫push|replace
//第一個(gè)參數(shù)：告訴原來的push，跳轉(zhuǎn)的目標(biāo)位置和傳遞了哪些參數(shù)
VueRouter.prototype.push = function (location,resolve,reject){
    if(resolve && reject){//判斷是否帶有傳遞狀態(tài)的參數(shù)
        originPush.call(this,location,resolve,reject)
    }else{
        originPush.call(this,location,() => {},() => {})//后面兩項(xiàng)分別代表執(zhí)行成功和失敗的回調(diào)函數(shù)
    }
}

路由守衛(wèi)

對路由進(jìn)行權(quán)限控制
全局路由守衛(wèi)聲明在index文件中；獨(dú)享路由守衛(wèi)聲明在router實(shí)例路由規(guī)則中；組件內(nèi)路由聲明在路由組件中

router.beforeEach((to,from,next)=>{
  if(to.meta.isAuth)//判讀當(dāng)前路由是否需要權(quán)限控制
    if(){next（）//放行}//權(quán)限控制具體規(guī)則
    else{console.log('無權(quán)限')}
nex()//不需要路由規(guī)則放行
})