Vue-router基礎篇
vue-router是我們在使用vue的過程之中常常會使用路由導航工具，由vue官方提供給我們的。下面就讓我們在專案之中來進行學習和了解。
建立專案：
通過使用vue ui我們可以很輕鬆的對專案進行建立，這是vue在3.x版本之後為我們提供的一套便捷的工具。選擇依賴的時候記得勾選vue-router就好了，vue腳手架會為我們自動的為專案新增上vue-router的部分內容。
同樣，我們也可以通過npm等等方式來進行安裝和使用。
待我們建立好初始專案內容之後，我們可以看到專案之中對於vue-router的使用包括在了router.js資料夾之中，main.js之中的vue物件之中引入了我們編寫的路由內容，我們在這裡可以整理一下我們的專案結構將路由單獨的放在一個資料夾之中並命名為router，然後通過資料夾下的index.js檔案來進行整體內容的匯出。這樣的話目錄結構會更清晰，我們編寫的時候可以更專注與相對應的內容資訊。
相關元件學習：
和vue-router相關的有兩個元件內容，我們這裡先說明一下：
1.router-link: 這一個元件實際上是預設將a標籤封裝了起來，我們可以通過設定其中的to屬性來進行路由的跳轉內容。這是最為基礎的跳轉方式。vue為我們提供瞭如下可以傳入的相關的引數內容：
- to：String|Location --表示的是路由連線，其實際上呼叫的是router.push方法，所以我們可以傳遞path路徑或者Object物件（其中帶有name屬性的，或者path屬性的）。
- replace： boolean --表示的大哥前跳轉嗲用router.replace方法。
- append：boolean --表示在當前路徑後新增相關路徑內容進行跳轉。如果本生路徑為/a，此處使用append並且傳遞的路徑是/b著實際跳轉路徑是/a/b。
- tag： String --預設值是a，表示使用什麼標籤渲染當前的路由導航。預設情況使用a標籤。
- active-class: String --這個屬性實際上是一個class值，表示的是連線被啟用的時候展示出來的效果是什麼，但是在使用這一屬性的時候我麼要注意。預設情況下使用的是全包含比對，即當我們需要to值為'/a'的標籤展示選中class的時候，'/'的全包含在了'/a'這個值之中，所以to值為'/'的標籤也會被啟用為active-class的情況。所以我們需要設定exact屬性。
- exact：Boolean --是否啟用exact比對模式，預設是全包含比對模式。
- event：String|Array< String > --宣告可以用來觸發導航的事件,預設情況下click事件觸發導航，可以通過這一屬性的設定來修改觸發導航的事件型別。
- exact-active-class：String --表示連線精確匹配的時候應該啟用的class內容。
我們來使用程式碼嘗試一下：
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/parent">Parent</router-link> |
<router-link to="/children">Children</router-link>
</div>
<router-view/>
</div>
</template>
<style>
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
.activeLink{
color: #42b983;
padding: 2px;
border-radius: 2px;
border: 1px solid #2c3e50;
background-color: #aaa;
}
</style>
複製程式碼
當我們為導航標籤設定了active-class或者exact-active-class的時候，點選當前導航欄將會轉變樣式，其他導航欄沒有影響，但是這兩個屬性展示的樣式有一些區別。
exact-active-class會先將設定的class值給與標籤，然後在將router-link-active這個屬性類給與到標籤，所以router-link-active之中的屬性可能會將設定的class之中的樣式屬性覆蓋。
active-class屬性的操作則是，先將router-link-eaxct-active這個class樣式給與連線，之後再將exact-active-class設定的class值給於到導航標籤。
發現：導航標籤點選之後實際上會自動賦予兩個class屬性內容，其中一個是router-link-exact-active，另一個是router-link-active屬性，而active-class實際上是使用設定的class來替換了router-link-active這個樣式類。同理exact-active-class屬性實際上是替換了router-link-exact-active屬性。
下面我們來嘗試一下router之中的全域性設定linkActiveClass和linkExactActiveClass兩個屬性。
linkActiveClass：是在router之中設定的全域性屬性，幫助所有的導航標籤新增active-class屬性內容。但是有一點是需要注意的是，包含比對，將當前導航標籤地址的父級地址相對應的導航欄也設定上這一class屬性內容。例如'/a'導航活動，則'/'和'/a'的導航標籤都會新增設定的樣式類。
linkExactActiveClass：同樣是router標籤之中設定的全域性屬性，幫助所有的標籤設定exact-actie-class屬性內容，比對方式是絕對比對。只有當前活動的導航對應的導航標籤會改變樣式。
當然如果我們在全域性之中設定了上面兩個屬性但是還是有導航標籤設定了exact-active-class或者active-class的情況，那麼標籤之中設定的屬性將會為最優先。
接下來我們來看一下導航標籤的自定義事件。我們需要在導航前觸發一系列的自定義的邏輯應該怎麼辦呢。使用我們平常寫的@click="function_name"
是沒有辦法觸發的。這個時候我們需要在繫結的事件後面新增.native
修飾符。
2.router-view：功能性標籤內容，展示元件，並且其展示元件之中也可以內嵌當前標籤，根據巢狀路徑，渲染巢狀元件。非router-view的屬性會自動的傳遞給當前的展示元件內容。由於其是組建內容可以配合使用<transition>
和<keep-alive>
兩個標籤，但是要保證<keep-alive>
標籤在內層。屬性這一方面只有name屬性：
- name： String --表示的是當前展示元件的名稱，用於區分同一vue組建之中有多個展示標籤的狀況。
我們來嘗試一下內嵌的方式。
App.vue檔案內容：
<router-link to="/child">Child</router-link>
Parent.vue檔案內容：
<router-link to="/children">children</router-link>
<router-view/>
router.js檔案內容：
{
path: '/parent',
name: 'parent',
component: () => import('../views/Parent.vue'),
children: [
{
path: '/children',
name: 'parent_children',
component: () => import('../views/Children.vue')
}
]
},
{
path: '/child',
name: 'child',
component: () => import('../views/Children.vue')
}
複製程式碼
可以看到在我們在parent.vue之中添加了一個router-view元件而在最外層的app.vue之中可以跳轉到parent頁面內容。parent.vue之中也有一個導航可以跳轉到children.vue元件內容。App.vue之中也有導航可以跳轉到children.vue組建之中。
展示結果：點選導航為/children的時候，app.vue的之中會展示parent.vue的內容，而parent.vue之中會展示children.vue的內容。如果點選/child導航內容，app.vue頁面將會直接展示children.vue頁面的內容。所以展示方式是依據設定的層級來的。而router.js之中的children屬性就是我們重要的層級設定屬性。
我們在來嘗試一下一個組建之中有多個router-view的情況。我麼修改一下上面的程式碼：
Parent.vue檔案內容：
<router-link to="/children">children</router-link>
<router-view/>
<router-view name="child2"/>
router.js
{
path: '/parent',
name: 'parent',
component: () => import('../views/Parent.vue'),
children: [
{
path: '/children',
name: 'parent_children',
components: {
default: () => import('../views/Children.vue'),
child2: () => import('../views/Children2.vue')
}
}
]
},
複製程式碼
可以看見我們將當前配置檔案之中的component屬性改成了components，這是在設定多個展示標籤的時候需要注意的內容。而相對應parent檔案之中的name就是components這個物件下面的屬性名稱，沒有設定name的那一個router-view標籤的名稱就是default。
可配置屬性：
這一部分我們主要來了解router.js之中可用於設定的基礎屬性。和路由解析的基礎要領，首先我們來看一下屬性吧:
屬性分為兩種：1.全域性設定屬性，2是route配置物件之中的屬性：上面實際上我們已經看到過一些route物件配置屬性了，path，name等等這些。還有一部分如下：
-
path：String --這裡我們重點說明一下path傳值。當我們需要在path之中傳值的時候，可以通過:paramName的形式來進行定義，例如
/home/:id。這時候，我們當我們輸入/home/123也將會匹配這一路由，並且id的值將會設定成為123。值可以通過在組建之中this.$router.param來獲取。或者可以通過設定props來用元件的props來注入。 - props：boolean|Object|Function --如果我們在路由跳轉中設定了值，只是想要通過vue注入當前值的話，直接設定這一屬性為true就可以了，同時我們也可以通過設定Object來注入我們想要注入的值。展示元件之中獲取值需要憑藉此處設定的屬性名稱。
- alias：String|Array< String > --別名屬性內容，可以為當前路由設定多個名稱屬性。方便跳轉。
- redirect： String|Location|Function --重定向屬性內容，可以傳遞的包括path的String內容，或者包含name屬性的物件，設定可以使用函式來進行內容的定向。當使用函式的時候需要注意返回值，可以返回String內容或者Location物件內容。
- meta：可以傳遞任何的值，我認為這是一個自定一屬性內容，使用者設定完成之後可以通過路由物件之中的meta屬性來獲取相關的數值。
- 其他的包括component, components, name, children就不再說明了。
下面我們來介紹一下全域性之中的配置屬性：
/#