vue-router實現原理及簡易demo

阿新 • • 發佈：2022-05-15

自定義路由demo，git地址: [email protected]:xsk-walter/Vue-router.git

一、router基本使用

① 建立和路由相關的元件

②Vue.use(vueRouter)註冊外掛

③建立路由物件，此時配置路由規則

④註冊router物件，vue例項時，選項裡配置建立好的router物件

⑤通過router-view，設定佔位，路徑匹配成功後，元件替換掉佔位，router-link建立一些連結

二、Hash和History模式的區別

表現形式
原理：①Hash基於錨點，以及onhashchange事件②History模式是基於HTML5中的History API
- history.pushState()\history.replaceState()
history模式需要伺服器支援：在服務端應該除了靜態資源外都返回單元應用的index.html

三、VueRouter原理

Hash模式
- #號後的內容作為路徑，可以通過location.url改變，如果只是#號後內容改變，不像伺服器端傳送請求，但會儲存到歷史記錄裡，監聽hashchange事件，根據當前路由地址找到對應元件重新渲染
History模式
- 通過history.pushState()方法改變位址列，並把當前地址儲存到訪問歷史中，不向服務傳送請求，監聽popstate事件，可以得到瀏覽器的變化，pushstate和replacestate不會觸發該事件，當點選瀏覽器前進和後退按鈕時觸發或者back和forward方法時。
- 當地址改變之後，根據當前地址找到對應元件重新渲染。

四、類圖

類名 VueRouter
屬性 options\data\routeMap

方法

①Constructor(options):VueRouter
②_install(Vue):void
③init():void => initEvent():void 、createRouteMap(): void 、initComponents(Vue):void

五、Vue的構建版本

執行時版本：不支援template模板，需要打包的時候提前編譯
完整版：包含執行時和編譯器，程式執行時把模板轉換成render函式

Vue-Router

一、普通、動態路由傳參方式

// 路由程式碼傳參
import About from 'about'
// routes 配置
{
  path: '/about/:id', // 動態路由
  component: About,
  props: true // ①布林模式
}

{
  path: '/about', // 普通路由
  component: 'About',
  props: { id: 19 } // ②物件模式
}

// 接收方式 props
props;['id'] 或者
props: {
  id: { type: Number, default: 12}
}
// ③函式模式
routes:[
  {
    path: '/about',
    component: About,
    // props: route => ({id:route.query.id}) // url='/about?id="89"' 或者
    props: route => ({id: route.params.id}) // url='/about/:id' => '/about/89'
  }
]

二、動態路由：將給定匹配模式的路由對映到同一個元件，複用一個元件，相對與銷燬後重建更高效。

Keep-alive包括時，元件的宣告週期鉤子函式不會被重複呼叫。

要對同一個元件中引數變化做出響應的話，可以通過watch 偵聽$route物件上的任意屬性

watch: {
  $route: {
    immediate: true,
    handler(route) {
      // 處理事件 對路由變化做出響應
    }
  }
}

或者使用導航守衛，beforeRouteUpdate，也可以取消導航

三、捕獲所有路由或404路由

四、路由的匹配語法

自定義正則像可以區分 /list/100 和/list/xsk 等路由
- routes: [ { path: '/list/:id(\\d+)'}, {path: '/list/:name'} ]
可以重複的引數匹配多個部分的路由，可以用 * 號和 +號將引數標記為重複
也可通過使用?號修飾符（0個或1個）將一個引數標記為可選

五、巢狀路由、命名路由

六、程式設計式導航

宣告式（）\程式設計式路由 router.push(...)

Router.push(params):

Params: 字串路徑、路徑物件、命名的路由並加上引數、帶查詢引數、帶hash

  '/users/detail'
  { path: '/users/detail' }
  { name: 'detail', params: {id: '0'}}
  { path: '/users/detail', query: {id: '0'} }

替換當前位置 router.replace({path: '/users'}) 或者router.push({path:'users', replace: true}); 導航時不會向history新增記錄
history.go()橫跨歷史

七、命名檢視：

八、重定向配置

// 通過routes配置來完成
const routes = [{ path: '/home', redirect: '/'}]
// 重定向的目標也可以是一個命名的路由  redirect: { name: 'Details'}
// 一個方法動態返回重定向目標
const routes = [
  {
    path: '/home/:id',
    redirect: to => {
      return {path:'Details', query: { q: to.params.searchText}}
    }
  }
]
// 別名
alias: '/home'

九、路由元件傳參 props、$route.query$route.params

布林模式 routes配置時 props:true設定即可
物件模式 props: { id: '0' } 當props為靜態的時候很有用
函式模式建立一個返回props的函式，允許你將引數轉換為其他型別，將靜態值與基於路由的值相結合等操作
```
props: route => ({ query: route.query.id })
props: route => ({ params: route.params.id})
```

對於命名檢視的路由，必須為每個命名檢視定義props配置

const routes = [{
  path: '/home',
  components: { default: Home, sidebar: Sidebar},
  props: { default: true, sidebar: true}
}]

十、不同的歷史模式

Hash模式：history: createWebHashHistory() SEO受影響
HTML5模式：history：createWbeHistory() 如果沒有適當的伺服器配置，就會404，需要在伺服器上新增一個簡單的回退路由

進階

一、導航守衛：vue-router提供的主要是通過跳轉或取消的方式守衛導航。

方式：全域性、單個路由獨享、元件
全域性前置守衛：beforeEnter:
- 每個守衛都接收兩個__引數__：to\from\next(可選)
- 返回值 ①false:取消當前導航、②一個路由地址：通過一個路由地址跳轉到不同的地址，類似於router.push()可配置，當前的導航被中斷然後進行一個新的導航。
- next可選引數
全域性後置守衛：afterEach 不接受next函式也不會改變導航本身
全域性解析守衛：beforeResolve
路由獨享守衛：在routes中配置
元件內的守衛可用配置API：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
- beforeRouteEnter:唯一可傳遞next回撥守衛；解決不可訪問this；
- next（）裡的內容執行時機在元件mounted週期之前；
- beforeRouteUpdate: 該元件複用時被呼叫