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就再也不說明了。

下面咱們來介紹一下全局之中的配置屬性：

• mode: Srting --主要時三種模式內容 'hash' , 'history'，'abstract'。默認狀況下是hash模式內容，在地址之中會有一個/#存在，瀏覽器也將再也不刷新展現當前頁面。可是設置了history模式以後#號將會去除，而且運用了HTML5 hsitory API，這個時候咱們須要後臺的配合才能進行正確的展現，這一塊在以後的部署之中在作詳細說明。'abstract'模式是支持全部的js環境。
• base：String --默認值是'/'，用於設置基礎路徑
• scrollBehavior: Function --滾動行爲
• parseQuery / stringifyQuery：Function --提供自定義查詢字符串的解析/反解析函數。
• fallback：boolean --當瀏覽器不支持 history.pushState 控制路由是否應該回退到 hash 模式。默認值爲 true。在 IE9 中，設置爲 false 會使得每一個 router-link 導航都觸發整頁刷新。它可用於工做在 IE9 下的服務端渲染應用，由於一個 hash 模式的 URL 並不支持服務端渲染。