路由模式解析

這裡要講vue-router的路由模式，首先要了解的一點就是路由是由多個URL組成的，使用不同的URL可以相應的導航到不同的位置。如果有進行過伺服器開發或者對http協議有所瞭解就會知道，瀏覽器中對頁面的訪問是無狀態的，所以我們在切換不同的頁面時都會重新進行請求。而實際使用vue和vue-router開發就會明白，在切換頁面時是沒有重新進行請求的，使用起來就好像頁面是有狀態的，這是什麼原因呢。這其實是藉助了瀏覽器的History API來實現的，這樣可以使得頁面跳轉而不重新整理，頁面的狀態就被維持在瀏覽器中了。

vue-router

vue-router中預設使用的是hash模式，也就是會出現如下的URL：

我們可以用如下程式碼修改成history模式：

import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/components/Main'
Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Main
    }
  ]
})

這樣子URL中的#號就被去除了。

實際上存在三種模式：

Hash: 使用URL的hash值來作為路由。支援所有瀏覽器。
History: 以來HTML5 History API 和伺服器配置。參考官網中

HTML5 History模式
Abstract： 支援所有javascript執行模式。如果發現沒有瀏覽器的API，路由會自動強制進入這個模式。