vue-router 入門學(xué)習(xí)

對(duì)于單頁面應(yīng)用，尤其是移動(dòng)端的網(wǎng)頁應(yīng)用，使用<a></a>標(biāo)簽實(shí)現(xiàn)頁面切換和跳轉(zhuǎn)會(huì)有300ms的延遲，遇到網(wǎng)速慢就會(huì)一直加載。所以在SPA應(yīng)用中，用視圖切換來模擬頁面的切換

vue-router 是Vue.js官方的路由插件，它和 Vue.js是深度集成的，適用于構(gòu)建SPA單頁面應(yīng)用。Vue的單頁面應(yīng)用是基于路由和組件的，相對(duì)于傳統(tǒng)頁面基于 a 鏈接和頁面，路由用于設(shè)定訪問路徑，并將路徑和組建映射起來，這樣就可以實(shí)現(xiàn)通過路由router來切換組建（視圖）。

vue-router 提供了兩個(gè)新組件：<router-link> 和 <router-view>

<router-link> 組件用于幫助用戶進(jìn)行視圖導(dǎo)航，默認(rèn)會(huì)被渲染成一個(gè) <a></a>標(biāo)簽，a 標(biāo)簽用 href 屬性來制定導(dǎo)航的目標(biāo)地址，而 router-link 組件則用 to 屬性來指定目標(biāo)地址

<router-view> 組件負(fù)責(zé)渲染匹配到的視圖組建，也就是 <router-link>指向的目標(biāo)地址

先回顧 傳統(tǒng) a 標(biāo)簽實(shí)現(xiàn)頁面跳轉(zhuǎn)的寫法：

<div class="router-demo">
    <div class="navbar">
        <a >百度</a>
        <a >網(wǎng)易</a>
        <a >新浪</a>
    </div>
</div>

根據(jù)前面的介紹，我們嘗試用 vue-router 來實(shí)現(xiàn)頁面跳轉(zhuǎn)，代碼稍作修改

<div id="app">
    <div class="navbar">
        <!-- 使用 router-link 組件來導(dǎo)航. -->
        <!-- 通過傳入 `to` 屬性指定鏈接. -->
        <!-- <router-link> 默認(rèn)會(huì)被渲染成一個(gè) `<a>` 標(biāo)簽 -->
        <router-link to="/baidu">百度</router-link>
        <router-link to="/wangyi">網(wǎng)易</router-link>
        <router-link to="/xinlang">新浪</router-link>
    </div>
    <div class="content">
        <!-- 路由出口 -->
        <!-- 路由匹配到的組件將渲染在這里 -->
        <router-view></router-view>
    </div>
</div>

接下來編寫js部分

1、定義組件

在 components 目錄下分別新建三個(gè)組件

2、定義路由

運(yùn)行 npm run dev 查看頁面效果

三個(gè) <router-link> 組件被渲染成了 <a> 標(biāo)簽，而 to 屬性也變成了<a> 標(biāo)簽的 href 屬性，再看看 <router-view> 也被渲染成對(duì)應(yīng)的視圖組件

https://router.vuejs.org/zh-cn/

根據(jù)官網(wǎng)的講解，可以一步一步的實(shí)現(xiàn)上面這個(gè)簡(jiǎn)單的小demo，接下來，繼續(xù)學(xué)習(xí)

router.js 的配置

mode：

默認(rèn)為 hash，使用 hash 模式時(shí)，頁面的路由地址會(huì)加一個(gè) #，如上例所示： http://localhost:8080/#/wangyi

可以采用 history 模式來取消這個(gè) #

base：

應(yīng)用的基路徑，例如，如果整個(gè)單頁應(yīng)用服務(wù)在 /app/ 下，base 就應(yīng)該設(shè)為 “/app/”，一般寫成 __dirname，在webpack 中有配置

routes：

包含了所有的頁面配置，其中：

path： 就是訪問的頁面路徑

name： 必須唯一，給頁面路徑定義的名字，頁面跳轉(zhuǎn)時(shí)，也可以用名字來跳

component： 組件，通過 import 導(dǎo)入。還有另一種寫法 ---> 懶加載

懶加載的方式不需要用 import 引入組件，好處是當(dāng)你訪問該頁面時(shí)才加載相關(guān)資源，這樣的話就能提高頁面的訪問速度

component: resolve => require(['../components/Baidu.vue'], resolve)

編程式導(dǎo)航

除了 <router-link> 創(chuàng)建 a 標(biāo)簽來定義導(dǎo)航鏈接，我們還可以借助 router 的實(shí)例方法，通過編寫代碼來實(shí)現(xiàn)

router.push( location )

想要導(dǎo)航到不同的 url，則使用 router.push 方法，這個(gè)方法會(huì)向 history 棧添加一個(gè)新的記錄。所以，當(dāng)用戶點(diǎn)擊瀏覽器回退按鈕時(shí)，則回到之前的 url

該方法的參數(shù)可以是一個(gè)字符串路徑，也可以是一個(gè)描述地址的對(duì)象，例如：

// 字符串
router.push ('home')

// 對(duì)象
router.push ({path: 'home'})

// 命名的路由
router.push ({name: 'user', params: { userId: 123 }})

// 帶查詢參數(shù)，變成 /regsiter ? plan = private
router.push ({path: 'register', query: { plan: 'private'}})

router.replace ( location )

跟 router.push 很像，唯一不同的是，它不會(huì)像 history 添加新的記錄，而是跟它的方法名一樣  --- 替換掉當(dāng)前的 history 記錄

router.go ( n )

這個(gè)方法的參數(shù)是一個(gè)整數(shù)，意思是在history 記錄中向前或者后退多少步，類似 window.history.go( n )

// 在瀏覽器中前進(jìn)一步，等同于 history.forward( )
router.go ( 1 )

// 后退一步記錄，等同于 history.back( )
router.go ( -1 )

// 前進(jìn) 3步記錄
router.go ( 3 )

//

導(dǎo)航鉤子

正如其名，vue-router 提供的導(dǎo)航鉤子用來 攔截導(dǎo)航，讓它完成跳轉(zhuǎn)或取消。比如做登錄的攔截，而鉤子函數(shù)根據(jù)其生效的范圍可以分為：全局鉤子函數(shù)、路由獨(dú)享鉤子函數(shù) 和 組件內(nèi)鉤子函數(shù)

全局鉤子函數(shù)

可以直接在路由配置文件 router.js 里編寫代碼邏輯，可以做一些全局性的路由攔截，例如：用 router.beforeEach 注冊(cè)一個(gè)全局的 before 鉤子：

router.beforeEach ( (to, from, next) => {
    //do something
    next()
})

router.afterEach ( (to, from, next) => {
    console.log( to.path )
})

當(dāng)一個(gè)導(dǎo)航觸發(fā)時(shí)，全局的 before 鉤子按照創(chuàng)建順序調(diào)用，鉤子是異步解析執(zhí)行，此時(shí)導(dǎo)航在所有鉤子 resolve 之前一直處于 等待中

每個(gè)鉤子方法接收 三個(gè)參數(shù)：

to: Route: 即將要進(jìn)入的目標(biāo)，路由對(duì)象

from: Route: 當(dāng)前導(dǎo)航正要離開的路由

next: Function：一定要調(diào)用該方法來 resolve 這個(gè)鉤子，執(zhí)行結(jié)果依賴 next( ) 方法的調(diào)用參數(shù)

> next(): 進(jìn)行管道中的下一個(gè)鉤子。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是 confirmed （確認(rèn)的）。

> next(false): 中斷當(dāng)前的導(dǎo)航。如果瀏覽器的 URL 改變了（可能是用戶手動(dòng)或者瀏覽器后退按鈕），那么 URL 地址會(huì)重置到 from 路由對(duì)應(yīng)的地址。

> next('/') 或者 next({ path: '/' }): 跳轉(zhuǎn)到一個(gè)不同的地址。當(dāng)前的導(dǎo)航被中斷，然后進(jìn)行一個(gè)新的導(dǎo)航。

確保要調(diào)用 next 方法，否則鉤子就不會(huì)被 resolved。

同樣可以注冊(cè)一個(gè)全局的 after 鉤子，不過它不像 before 鉤子那樣，after 鉤子沒有 next 方法，不能改變導(dǎo)航：

router.afterEach(
    route => {  // ...}
)

路由獨(dú)享鉤子函數(shù)

可以做一些單個(gè)路由的跳轉(zhuǎn)攔截，在配置文件編寫代碼即可

const router = new Router({
    routes: [
        {
            path: '/foo',
            component: Foo,
            beforeEnter: (to, from, next) => {
                // ...
            }
        }
    ]
})

組件內(nèi)鉤子函數(shù)

更細(xì)粒度的路由攔截，只針對(duì)一個(gè)進(jìn)入某一個(gè)組件的攔截，可以在路由組件內(nèi)直接定義以下路由導(dǎo)航鉤子

beforeRouteEnter

beforeRouteUpdate (2.2 新增)

beforeRouteLeave

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {    // 在渲染該組件的對(duì)應(yīng)路由被 confirm 前調(diào)用
    // 不！能！獲取組件實(shí)例 `this`
    // 因?yàn)楫?dāng)鉤子執(zhí)行前，組件實(shí)例還沒被創(chuàng)建
  },
  beforeRouteUpdate (to, from, next) {    // 在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用
    // 舉例來說，對(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)用。
    // 可以訪問組件實(shí)例 `this`
  },
  beforeRouteLeave (to, from, next) {    // 導(dǎo)航離開該組件的對(duì)應(yīng)路由時(shí)調(diào)用
    // 可以訪問組件實(shí)例 `this`
  }
}

beforeRouteEnter 鉤子 不能 訪問 this，因?yàn)殂^子在導(dǎo)航確認(rèn)前被調(diào)用,因此即將登場(chǎng)的新組件還沒被創(chuàng)建。

不過，你可以通過傳一個(gè)回調(diào)給 next來訪問組件實(shí)例。在導(dǎo)航被確認(rèn)的時(shí)候執(zhí)行回調(diào)，并且把組件實(shí)例作為回調(diào)方法的參數(shù)。

beforeRouteEnter (to, from, next) {
  next(vm => {    // 通過 `vm` 訪問組件實(shí)例
  })
}

你可以 在 beforeRouteLeave 中直接訪問 this。這個(gè) leave 鉤子通常用來禁止用戶在還未保存修改前突然離開。可以通過 next(false) 來取消導(dǎo)航。

鉤子函數(shù)使用場(chǎng)景

其實(shí)路由鉤子函數(shù)在項(xiàng)目開發(fā)中用的并不是非常多，一般用于登錄態(tài)的校驗(yàn)，沒有登錄跳轉(zhuǎn)到登錄頁；權(quán)限的校驗(yàn)等等。當(dāng)然隨著項(xiàng)目的開發(fā)進(jìn)展，也會(huì)有更多的功能可能用鉤子函數(shù)實(shí)現(xiàn)會(huì)更好，我們知道有鉤子函數(shù)這個(gè)好東西就行了，下次遇到問題腦海就能浮現(xiàn)，這個(gè)功能用鉤子實(shí)現(xiàn)會(huì)比較棒

滾動(dòng)行為

在利用vue-router去做跳轉(zhuǎn)的時(shí)候，到了新頁面如果對(duì)頁面的滾動(dòng)條位置有要求的話，可以利用下面這個(gè)方法

const router = new VueRouter({  routes: [...],
  scrollBehavior (to, from, savedPosition) {    
    // return 期望滾動(dòng)到哪個(gè)的位置
  }
})

scrollBehavior 方法接收 to 和 from 路由對(duì)象。

第三個(gè)參數(shù) savedPosition 當(dāng)且僅當(dāng) popstate 導(dǎo)航 (mode為 history 通過瀏覽器的 前進(jìn)/后退 按鈕觸發(fā)) 時(shí)才可用。

//所有路由新頁面滾動(dòng)到頂部：
scrollBehavior (to, from, savedPosition) {  
    return { x: 0, y: 0 }
}
//如果有錨點(diǎn)
scrollBehavior (to, from, savedPosition) {  
    if (to.hash) {    
        return {      
            selector: to.hash
        }
    }
}