vue-router

個人理解：Vue中的路由相當於pc裡面的錨點超連結，如果點選了頁面轉向哪，也有點像ajax。

安裝

npm install vue-router

開始

用Vue.js + vue-router建立單頁應用，是非常簡單的。使用Vue.js時，我們就已經把元件組合成一個應用了，當你要把vue-router加進來，只需要配置元件和路由對映，然後告訴vue-router在哪裡渲染他們。
元件 → 路由 → 渲染地方

<div id="app">
  <h1>Hello App!</h1>
  <p
 
>
    <!-- 使用 router-link 元件來導航. -->
    <!-- 通過傳入 `to` 屬性指定連結. -->
    <!-- <router-link> 預設會被渲染成一個 `<a>` 標籤 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
 

  <!-- 路由匹配到的元件將渲染在這裡 -->
  <router-view></router-view>
</div>

// 0. 如果使用模組化機制程式設計，匯入Vue和VueRouter，要呼叫 Vue.use(VueRouter)

// 1. 定義（路由）元件。
// 可以從其他檔案 import 進來
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定義路由
// 每個路由應該對映一個元件。 其中"component" 可以是
 

// 通過 Vue.extend() 建立的元件構造器，
// 或者，只是一個元件配置物件。
// 我們晚點再討論巢狀路由。
const routes = [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
]

// 3. 建立 router 例項，然後傳 `routes` 配置
// 你還可以傳別的配置引數, 不過先這麼簡單著吧。
const router = new VueRouter({
  routes // （縮寫）相當於 routes: routes
})

// 4. 建立和掛載根例項。
// 記得要通過 router 配置引數注入路由，
// 從而讓整個應用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 現在，應用已經啟動了！

動態路由匹配

我們經常需要把某種模式匹配到的所有路由，全都對映到同個元件。例如，我們有一個User元件，對於所有ID各不相同的使用者，都要使用這個元件來渲染。那麼，我們可以在vue-router的路由路徑中使用動態路徑引數來達到這個效果。

const User = {
  template: '<div>User</div>'
}
const router = new VueRouter({
    routes: [
        {path: '/user/:id', component: User}
    ]
})

路徑引數用：表示。
一個路由中可以設定多段路徑引數，對應的值都會設定到route.params。除了route.params外，route對象還提供了其它有用的信息，例如route.query，route.hash等。當使用路由參數時，組件實例會被復用，這就意味著組件的生命周期鉤子不會再被調用。如果想對路由參數的變化作出響應，可以簡單地watchroute物件。

const User = {
    template: '...',
    watch: {
        '$route' (to, from) {

        }
    }
}

巢狀路由

元件模板中有可能有自己的出口，要在巢狀的出口中渲染元件，需要在VueRouter的引數中使用children配置：

const router = new VueRouter({
    router: [
        {path: '/user/:id', component: User,
            children: [
                {
                    path: 'profile',
                    component: UserProfile
                },
                {
                    path: 'posts',
                    component: UserPosts
                }
            ]
        }
    ]
})

要注意，以/開頭的巢狀路徑會被當作根路徑。這讓你充分的使用巢狀元件而無須設定巢狀的路徑。

程式設計式的導航

除了使用建立a標籤來定義導航連結，我們還可以藉助router的例項方法，通過編寫程式碼來實現。
router.push()
這種方法會向history棧中新增記錄
router.push() ==

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

// 物件
router.push({ path: 'home' })

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

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

router.replace(location)
router.replace(location) ==
router.go(n)
這個方法的引數是一個整數，意思是在history記錄中向前或者後退多少步，類似window.history.go(n)

命名路由

主要是為了通過一個名稱來標識一個路由顯得更方便一些。

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

命名檢視

有時想同時展示多個檢視。

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>  
const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

重定向和別名

const router = new VueRouter({
    routes: [
        {path: '/a', redirect: '/b'}
    ]
})

重定向的目標也可以是一個命名的路由：

const router = new VueRouter({
    routes: [
        {path: '/a', redirect: {name: 'foo'}}
    ]
})

甚至是一個方法

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // 方法接收 目標路由 作為引數
      // return 重定向的 字串路徑/路徑物件
    }}
  ]
})

別名

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

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

HTML5 History模式

使用history模式時，URL就是正常的url。

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

導航鉤子

正如其名，vue-router提供的導航鉤子主要用來攔截導航，讓它完成跳轉或取消。有多種方式可以在路由導航發生時執行鉤子： 全域性的，單個路由獨享的，或者元件級的。
全域性鉤子

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})
每個鉤子方法接收三個引數：

    to: Route: 即將要進入的目標 路由物件

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

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

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

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

        next('/') 或者 next({ path: '/' }): 跳轉到一個不同的地址。當前的導航被中斷，然後進行一個新的導航。

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

某個路由獨享的鉤子

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

元件內的鉤子

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染該元件的對應路由被 confirm 前呼叫
    // 不！能！獲取元件例項 `this`
    // 因為當鉤子執行前，元件例項還沒被建立
  },
  beforeRouteUpdate (to, from, next) {
    // 在當前路由改變，但是改元件被複用時呼叫
    // 舉例來說，對於一個帶有動態引數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
    // 由於會渲染同樣的 Foo 元件，因此元件例項會被複用。而這個鉤子就會在這個情況下被呼叫。
    // 可以訪問元件例項 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 導航離開該元件的對應路由時呼叫
    // 可以訪問元件例項 `this`
  }
}

路由元資訊
定義路由的時候可以配置meta欄位

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

我們稱呼routes配置中的每個路由物件為路由記錄。路由記錄可以是巢狀的，因此，當一個路由匹配成功後，他可能匹配多個路由記錄。
例如，根據上面的路由配置，/foo/bar這個URL將會匹配路由記錄以及子路由記錄。
一個路由匹配到的所有路由記錄會暴露為route對象（還有在導航鉤子中的route對象）的route.matched陣列。因此，我們需要遍歷$route.matched來檢查路由記錄中的meta欄位。

過渡動效

是基本的動態元件，所以我們可以用元件給它新增一些過渡效果。

資料獲取

有時候，進入某個路由後，需要從伺服器獲取資料。例如，在渲染使用者資訊時，你需要從伺服器獲取使用者的資料，我們可以通過兩種方式來實現：
1.導航完成之後獲取：先完成導航，然後在接下來的元件生命週期鉤子中獲取資料，在資料獲取期間顯示載入中的指示。
2.導航完成之前獲取：導航完成前，在路由的enter鉤子中獲取資料，在資料獲取成功後執行導航。
導航完成後獲取資料
當你使用這種方式時，我們會馬上導航和渲染元件，然後在元件的created鉤子中獲取資料。這讓我們有機會再資料獲取期間展示一個loading狀態，還可以在不同檢視間展示不同的loading狀態。

<template>
  <div class="post">
    <div class="loading" v-if="loading">
      Loading...
    </div>

    <div v-if="error" class="error">
      {{ error }}
    </div>

    <div v-if="post" class="content">
      <h2>{{ post.title }}</h2>
      <p>{{ post.body }}</p>
    </div>
  </div>
</template>  

export default {
    data() {
        return {
            loading: false,
            post: null,
            error: null
        }
    },
    created() {
        // 元件建立完後獲取資料，
        // 此時data已經被observed了
        this.fetchData()
    },
    watch: {
        // 如果路由有變化，會再次執行該方法
        '$route': 'fetchData'
    },
    methods: {
        this.error = this.post =null
        this.loading =true
        // replace getPost with your data fetching util/API wrapper
        getPost(this.$route.params.id, (err ,post) => {
            this.loading = false
            if(err) {
                this.error = err.toString()
            } else {
                this.post = post
            }
        })
    }
}

在導航完成前獲取資料

export default {
  data () {
    return {
      post: null,
      error: null
    }
  },
  beforeRouteEnter (to, from, next) {
    getPost(to.params.id, (err, post) => 
      if (err) {
        // display some global error message
        next(false)
      } else {
        next(vm => {
          vm.post = post
        })
      }
    })
  },
  // 路由改變前，元件就已經渲染完了
  // 邏輯稍稍不同
  watch: {
    $route () {
      this.post = null
      getPost(this.$route.params.id, (err, post) => {
        if (err) {
          this.error = err.toString()
        } else {
          this.post = post
        }
      })
    }
  }
}

滾動行為

使用前端路由，當切換到新路由時，想要頁面滾動到頂部，或者是保持原先的滾動位置，就像重新載入頁面那樣。vue-router能做到，而且更好，它讓你可以自定義路由切換時頁面如何滾動。

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

路由懶載入

當打包構建應用時，Javascript包會變得非常大，影響頁面載入。如果我們能把不同路由對應的元件分割成不同的程式碼塊，然後當路由被訪問的時候才載入對應元件，這樣就更加高效了。
結合Vue的非同步元件和Webpack的code splitting feature，輕鬆實現路由元件的懶載入。
我們要做的就是把路由對應的元件定義成非同步元件：

const Foo = resolve => {
  // require.ensure 是 Webpack 的特殊語法，用來設定 code-split point
  // （程式碼分塊）
  require.ensure(['./Foo.vue'], () => {
    resolve(require('./Foo.vue'))
  })
}

或者

const Foo = resolve => require(['./Foo.vue'], resolve)

API文件

Props

### to
<!-- 字串 -->
<router-link to="home">Home</router-link>
<!-- 渲染結果 -->
<a href="home">Home</a>

<!-- 使用 v-bind 的 JS 表示式 -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- 不寫 v-bind 也可以，就像繫結別的屬性一樣 -->
<router-link :to="'home'">Home</router-link>

<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 帶查詢引數，下面的結果為 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

replace

<router-link :to="{ path: '/abc'}" replace></router-link>

append

設定append屬性後，則在當前路徑前新增基路徑。

<router-link :to="{ path: 'relative/path'}" append></router-link>

tag

預設為a標籤，有時候想要渲染成某種標籤，例如

。於是我們是用tag prop類指定何種標籤，同樣它還是會監聽點選，觸發導航。

<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染結果 -->
<li>foo</li>

active-class

預設值是router-link-active，設定連結啟用時使用的CSS類名。預設值可以通過路由的構造選項linkActiveClass來全域性配置。

exact

預設值是false，是否擴充套件到全域性。

router-view

元件是一個functional元件，渲染路徑匹配到的檢視元件。渲染的元件還可以內嵌自己的，根據巢狀路徑，渲染巢狀元件。

Props

name

預設值是default，如果設定了名稱，則會渲染對應的路由配置中components下的響應元件。

行為表現

其他屬性（非router-view使用的屬性）都直接傳給渲染的元件，很多時候，每個路由的資料都是包含在路由引數中。
因為它也是個元件，所以可以配合和使用。如果兩個結合一起用，要確保在內層使用：

<transition>
    <keep-alive>
        <router-view></router-view>
    </keep-alive>
</transition>

路由資訊物件

route object是不可變的，每次成功的導航後都會產生一個新的物件。
$route.path

型別: string

字串，對應當前路由的路徑，總是解析為絕對路徑，如 "/foo/bar"。

$route.params

型別: Object

一個 key/value 物件，包含了 動態片段 和 全匹配片段，如果沒有路由引數，就是一個空物件。
$route.query

型別: Object

一個 key/value 物件，表示 URL 查詢引數。例如，對於路徑 /foo?user=1，則有 $route.query.user == 1，如果沒有查詢引數，則是個空物件。

$route.hash

型別: string

當前路由的 hash 值 (帶 #) ，如果沒有 hash 值，則為空字串。

$route.fullPath

型別: string

完成解析後的 URL，包含查詢引數和 hash 的完整路徑。

$route.matched

型別: Array<RouteRecord>

一個數組，包含當前路由的所有巢狀路徑片段的 路由記錄 。路由記錄就是 routes 配置陣列中的物件副本（還有在 children 陣列）。

const router = new VueRouter({
  routes: [
    // 下面的物件就是 route record
    { path: '/foo', component: Foo,
      children: [
        // 這也是個 route record
        { path: 'bar', component: Bar }
      ]
    }
  ]
})

當 URL 為 /foo/bar，$route.matched 將會是一個包含從上到下的所有物件（副本）。

$route.name

Router構造配置

Router 例項

當前路由的名稱，如果有的話。