vue-router帶你出坑

最近學習vue，關於vue-router看了3遍，纔開始有了一些本身的理解，並且，對於初學者，我認爲
vue-router的官方手冊順序並不適用，因此把本身認爲重點的和難以理解的，還有學習順序進行調整，但願對其餘
初學者有所幫助，嗯，共同進步~

配置路由模式

const router = new VueRouter({//建立路由實例
  mode: 'history',
  routes
})

配置路由模式:

• hash: 使用 URL hash 值來做路由。支持全部瀏覽器，包括不支持 HTML5 History Api 的瀏覽器。

• history: 依賴 HTML5 History API 和服務器配置。查看 HTML5 History 模式.

• abstract: 支持全部 JavaScript 運行環境，如 Node.js 服務器端。若是發現沒有瀏覽器的 API，路由會自動強制進入這個模式。

hash模式（默認）

使用 URL 的 hash 來模擬一個完整的 URL，因而當 URL 改變時，頁面不會從新加載。

history模式

經過history完成 URL 跳轉而無須從新加載頁面。

由於咱們的應用是個單頁客戶端應用，若是後臺沒有正確的配置，當用戶在瀏覽器直接訪問 http://oursite.com/user/id 就會返回 404，這就很差看了。

注意爲了防止404錯誤，須要寫notFound.html頁面防止頁面找不到發生錯誤。

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})

動態路由匹配

當前有路徑/foo，當你/foo/XXX，無論XXX是什麼，你須要讓他都顯示某個組件component：A，或者
說路由到某一個頁面，就須要使用動態路由配置

複製代碼查看效果在線測試地址

<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">
  <p>
    <router-link to="/user/foo">/user/foo</router-link>
    <router-link to="/user/bar">/user/bar</router-link>
    <router-link to="/user/aa">/user/aa</router-link>
    <router-link to="/user/bb">/user/bb</router-link>
  </p>
  <router-view></router-view>
</div>

const User = {
  template: `<div>你的ID是 {{ $route.params.id }}</div>`
}

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

const app = new Vue({ router }).$mount('#app')

嵌套路由

我的以爲和動態路由有點像，/foo下能有兩個子路由/foo/a和/foo/b分別跳轉A和B頁面，這時就能夠
使用嵌套路由。

編程式的導航

1. 就是說你在代碼中能夠控制路由，包含幾個跳轉函數。

• router.push(location) history中會有記錄

• router.replace(location) history中不會有記錄

• router.go(n) 在history記錄中向前跳轉幾頁或者向後幾頁

// 後退一步記錄，等同於 history.back()
router.go(-1)

// 前進 3 步記錄
router.go(3)

// 若是 history 記錄不夠用，那就默默地失敗唄
router.go(-100)

1. location的值能夠有一下幾種類型：

• 'home'

• {path:'home'}

• { name: 'user', params: { userId: 123 }} // 命名路由，變成/user/123

• { path: 'register', query: { plan: 'private' }} // 帶查詢參數，變成 /register?plan=private

命名視圖

一個視圖叫router-view，通俗的說，就是一個頁面能夠有多個視圖，一個視圖對應一個組件。
一個路由，n個視圖n個組件，至關於一次路由展現了多個組件。

<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
      }
    }
  ]
})

路由信息對象

一個 route object（路由信息對象） 表示當前激活的路由的狀態信息，包含了當前 URL 解析獲得的信息，還有 URL 匹配到的 route records（路由記錄）。

route object 出如今多個地方:

• 組件內的 this.$route 和 $route watcher 回調（監測變化處理）;

• router.match(location) 的返回值

• scrollBehavior 方法的參數

• 導航鉤子的參數：

router.beforeEach((to, from, next) => {
  // to 和 from 都是 路由信息對象,後面使用路由的鉤子函數就容易理解了
})

具體還有其餘屬性請自行去看官方文檔

Router 構造配置

有幾個重要的點容易出錯

declare type RouteConfig = {
  path: string;
  component?: Component;
  name?: string; // for named routes (命名路由)
  components?: { [name: string]: Component }; // for named views (命名視圖組件)
  redirect?: string | Location | Function;
  alias?: string | Array<string>;
  children?: Array<RouteConfig>; // for nested routes
  beforeEnter?: (to: Route, from: Route, next: Function) => void;
  meta?: any;
}

scrollBehavior

下屬代碼意思，瀏覽網頁滾動中間位置，下一頁，點擊瀏覽器返回鍵，保持上一頁瀏覽位置，使用
vue-router返回上一頁，從瀏覽器頂部重新開始。

scrollBehavior: function (to, from, savedPosition) {
        return savedPosition || { x: 0, y: 0 }
    },

• savedPosition ：在使用正常瀏覽器返回前進，聽從瀏覽器屬性，記錄瀏覽位置

• { x: 0, y: 0 }：在使用vue-router路由的頁面從頂端開始顯示

參考文檔

• vue-router手冊