從零開始的vue學習筆記（八）

前言

今天花一天時間閱讀完Vue Router的官方文檔的基礎部分，簡單的作一下總結和記錄
##　Vue Router是什麼
Vue Router 是 Vue.js 官方的路由管理器，用於構建單頁應用(SPA)。地址欄url的變化並不會去發請求去服務器取新的頁面，而是按需加載局部組件，看起來就像無刷新同樣。包括的功能包括：

• 嵌套的路由/視圖表
• 模塊化的、基於組件的路由配置
• 路由參數、查詢、通配符
• 基於 Vue.js 過渡系統的視圖過渡效果
• 細粒度的導航控制
• 帶有自動激活的 CSS class 的連接
• HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
• 自定義的滾動條行爲

實際上路由的用途是用路由配置表來控制 url 對應的跳轉地址，地址對應的能夠是基礎視圖組件或者佈局組件，能夠用於靈活的視圖導航。

安裝

• 直接下載 / CDN
  下載地址：https://unpkg.com/vue-router/dist/vue-router.js
  而後經過js引入進來：

  <script src="/path/to/vue.js"></script>
    <script src="/path/to/vue-router.js"></script>

• NPM

  安裝npm包：

  npm install vue-router

  而後經過Vue.use()引入：

  import Vue from 'vue'
    import VueRouter from 'vue-router'
  
    Vue.use(VueRouter)

基本用法

Vue Router的API和Vuex相似，new VueRouter 構建出一個路由實例，而後提供了<router-link> 組件用於寫連接，<router-view> 組件用於展現，Router的構建選項中最重要的就是 routes ，它用來定義路由的規則。

一個簡單的路由例子：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

  <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')

  // 如今，應用已經啓動了！

動態路由

經過使用:動態路徑參數來作動態路由，使用通配符 (*)來匹配任意路徑，做爲捕獲任意路徑和404路徑。詳細請參考：連接地址

嵌套路由

路由是支持嵌套的，routes中的 children 配置用來寫嵌套路由配置，而後嵌套的路由能夠在組件的 <router-view> 作嵌套展現。

編程式的導航

除了使用 <router-link> 建立 a 標籤來定義導航連接，咱們還能夠藉助 router 的實例方法，經過編寫代碼來實現。主要採用router.push(location, onComplete?, onAbort?)這個方法，另外還提供了router.replace(location, onComplete?, onAbort?) ，router.go(n)這兩個不經常使用的方法，具體用法參考：連接地址

命名路由

除了直接用 path 指定路由的路徑外，能夠用 name 給路由取一個別名方便使用，具體參考：連接

命名視圖

能夠給視圖也取名字方便使用， router-view 組件的 name 屬性指定，不給的話默認爲 default 名字的。

重定向和別名

重定向也是經過 routes 配置來完成，配置採用 redirect 。例子：

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

別名採用 alias 來命名。

路由組件傳參

使用 props 將組件和路由解耦，讓路由能夠傳參數給組件，達到動態配置目的。例子：

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

      // 對於包含命名視圖的路由，你必須分別爲每一個命名視圖添加 `props` 選項：
      {
        path: '/user/:id',
        components: { default: User, sidebar: Sidebar },
        props: { default: true, sidebar: false }
      }
    ]
  })

props 能夠是布爾、對象和函數，具體用法參考：連接地址

HTML5 History 模式

vue-router 默認 hash 模式 ，會讓url地址裏面帶有#符號，很是醜陋並且讓錨點語法沒法使用，因此須要 history 模式，例子：

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

路由懶加載

結合 Vue 的異步組件和 Webpack 的代碼分割功能，輕鬆實現路由組件的懶加載(路由被訪問的時候才加載對應組件)。例子：

routes: [
    {
      path: "/user",
      component: () =>
        import(/* webpackChunkName: "layout" */ "./layouts/UserLayout")
    }
  ]

路由的其餘主題

其餘主題包括：

• 導航守衛
• 路由元信息
• 過渡動效
• 數據獲取
• 滾動行爲
• Router API

對於這些主題，感興趣的能夠再點擊連接學習，根據2/8定律，不做爲學習的重點，用到再看。

原文出處：https://www.cnblogs.com/huangmengke/p/11697295.html