大家好，我來了！本期為大家帶來的Web前端學習知識是”前端開發：如何安裝配置Vue路由？“，喜歡Web前端的小伙伴，一起看看吧！

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌。包含的功能有：

嵌套的路由/視圖表

模塊化的、基于組件的路由配置

路由參數、查詢、通配符

基于 Vue.js 過渡系統的視圖過渡效果

細粒度的導航控制

帶有自動激活的 CSS class 的鏈接

HTML5 歷史模式或 hash 模式，在 IE9 中自動降級

自定義的滾動條行為

1.安裝

NPM

npm install vue-router –save

如果在一個模塊化工程中使用它，必須要通過 Vue.use() 明確地安裝路由功能：

2.基礎

起步

HTML指定路由顯示位置

JavaScript配置路由

1. 定義 (路由) 組件

創建了兩個組件：Home.vue和About.vue

2. 定義路由

3. 創建 router 實例，然后傳 `routes` 配置

4. 創建和掛載根實例

5.增加跳轉規則

動態路由匹配（路由傳遞參數）

我們經常需要把某種模式匹配到的所有路由，全都映射到同個組件。例如，我們有一個 User 組件，對于所有 ID 各不相同的用戶，都要使用這個組件來渲染。那么，我們可以在 vue-router 的路由路徑中使用“動態路徑參數”(dynamic segment) 來達到這個效果：

定義傳遞參數的key

傳遞參數值

讀取參數

捕獲所有路由或 404 Not found 路由

嵌套路由

實際生活中的應用界面，通常由多層嵌套的組件組合而成。同樣地，URL 中各段動態路徑也按某種結構對應嵌套的各層組件

借助 vue-router，使用嵌套路由配置，就可以很簡單地表達這種關系。

對應的子路由需要顯示的位置：news ->

注意事項：

要注意，以 / 開頭的嵌套路徑會被當作根路徑。 這讓你充分的使用嵌套組件而無須設置嵌套的路徑。

跳轉的連接要寫全路徑<li><router-link to="/news/yule">娛樂</router-link></li>

編程式的導航

除了使用 <router-link> 創建 a 標簽來定義導航鏈接，我們還可以借助 router 的實例方法，通過編寫代碼來實現。

關于<router-link>解釋

<router-link> 組件支持用戶在具有路由功能的應用中 (點擊) 導航。 通過 to 屬性指定目標地址，默認渲染成帶有正確鏈接的 <a> 標簽，可以通過配置 tag 屬性生成別的標簽.。另外，當目標路由成功激活時，鏈接元素自動設置一個表示激活的 CSS 類名。

<router-link> 比起寫死的 <a href="..."> 會好一些，理由如下：

1.無論是 HTML5 history 模式還是 hash 模式，它的表現行為一致，所以，當你要切換路由模式，或者在 IE9 降級使用 hash 模式，無須作任何變動。

2.在 HTML5 history 模式下，router-link 會守衛點擊事件，讓瀏覽器不再重新加載頁面。

3.當你在 HTML5 history 模式下使用 base 選項之后，所有的 to 屬性都不需要寫 (基路徑) 了。

router.push(location, onComplete?, onAbort?)

router.replace(location, onComplete?, onAbort?)

跟 router.push 很像，唯一的不同就是，它不會向 history 添加新記錄，而是跟它的方法名一樣 —— 替換掉當前的 history 記錄

router.go(n)

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

命名路由

有時候，通過一個名稱來標識一個路由顯得更方便一些，特別是在鏈接一個路由，或者是執行一些跳轉的時候。你可以在創建 Router 實例的時候，在 routes 配置中給某個路由設置名稱。

命名視圖

有時候想同時 (同級) 展示多個視圖，而不是嵌套展示，例如創建一個布局，有 sidebar (側導航) 和 main (主內容) 兩個視圖，這個時候命名視圖就派上用場了。你可以在界面中擁有多個單獨命名的視圖，而不是只有一個單獨的出口。如果 router-view 沒有設置名字，那么默認為 default。

一個視圖使用一個組件渲染，因此對于同個路由，多個視圖就需要多個組件。確保正確使用 components 配置 (帶上 s)：

重定向和別名

重定向也是通過 routes 配置來完成，下面例子是從 /a 重定向到 /b

別名，/a 的別名是 /b，意味著，當用戶訪問 /b 時，URL 會保持為 /b，但是路由匹配則為 /a，就像用戶訪問 /a 一樣。

路由組件傳參

在組件中使用 $route 會使之與其對應路由形成高度耦合，從而使組件只能在某些特定的 URL 上使用，限制了其靈活性。

使用 props 將組件和路由解耦：

取代與 $route 的耦合

HTML5 History 模式

vue-router 默認 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，于是當 URL 改變時，頁面不會重新加載。

如果不想要很丑的 hash，我們可以用路由的 history 模式，這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須重新加載頁面。

當你使用 history 模式時，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！

不過這種模式要玩好，還需要后臺配置支持。因為我們的應用是個單頁客戶端應用，如果后臺沒有正確的配置，當用戶在瀏覽器直接訪問 http://oursite.com/user/id 就會返回 404，這就不好看了。

導航高亮效果

Router-link默認攜帶class：router-link-active和router-link-exact-active，可以用來設置樣式

當然class過長可以通過全局配置來修改：linkActiveClass和linkExactActiveClass

Exact：精準匹配，主要解決根目錄的匹配規則

進階

導航守衛

正如其名，vue-router 提供的導航守衛主要用來通過跳轉或取消的方式守衛導航。有多種機會植入路由導航過程中：全局的, 單個路由獨享的, 或者組件級的。

記住參數或查詢的改變并不會觸發進入/離開的導航守衛。你可以通過觀察 $route 對象來應對這些變化，或使用 beforeRouteUpdate 的組件內守衛。

全局前置守衛

你可以使用 router.beforeEach 注冊一個全局前置守衛：

當一個導航觸發時，全局前置守衛按照創建順序調用。守衛是異步解析執行，此時導航在所有守衛 resolve 完之前一直處于 等待中。

每個守衛方法接收三個參數：

to: Route: 即將要進入的目標 路由對象

from: Route: 當前導航正要離開的路由

next: Function: 一定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。

next(): 進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是 confirmed (確認的)。

next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了 (可能是用戶手動或者瀏覽器后退按鈕)，那么 URL 地址會重置到 from 路由對應的地址。

next('/') 或者 next({ path: '/' }): 跳轉到一個不同的地址。當前的導航被中斷，然后進行一個新的導航。你可以向 next 傳遞任意位置對象，且允許設置諸如 replace: true、name: 'home' 之類的選項以及任何用在 router-link 的 to prop 或 router.push 中的選項。

next(error): (2.4.0+) 如果傳入 next 的參數是一個 Error 實例，則導航會被終止且該錯誤會被傳遞給 router.onError() 注冊過的回調。

確保要調用 next 方法，否則鉤子就不會被 resolved。

全局解析守衛

在 2.5.0+ 你可以用 router.beforeResolve 注冊一個全局守衛。這和 router.beforeEach 類似，區別是在導航被確認之前，同時在所有組件內守衛和異步路由組件被解析之后，解析守衛就被調用

全局后置鉤子

你也可以注冊全局后置鉤子，然而和守衛不同的是，這些鉤子不會接受 next 函數也不會改變導航本身：

路由獨享的守衛

你可以在路由配置上直接定義 beforeEnter 守衛：

這些守衛與全局前置守衛的方法參數是一樣的。

組件內的守衛

最后，你可以在路由組件內直接定義以下路由導航守衛：

完整的導航解析流程

導航被觸發。

在失活的組件里調用離開守衛。

調用全局的 beforeEach 守衛。

在重用的組件里調用 beforeRouteUpdate 守衛 (2.2+)。

在路由配置里調用 beforeEnter。

解析異步路由組件。

在被激活的組件里調用 beforeRouteEnter。

調用全局的 beforeResolve 守衛 (2.5+)。

導航被確認。

調用全局的 afterEach 鉤子。

觸發 DOM 更新。

用創建好的實例調用 beforeRouteEnter 守衛中傳給 next 的回調函數。

路由元信息

本期為大家帶來的Web前端學習知識”前端開發：如何安裝配置Vue路由？“介紹完了，想了解更多精彩內容的小伙伴，關注我，我們下期再見！

總結

以上是生活随笔為你收集整理的vue 一个页面多个router-view如何配置子路由_前端开发：如何安装配置Vue路由？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。