效果：

 原因：這是因為vue是單頁面應用的原因，在前進或后退的時候使用這種方式將保持路徑的正確性，#是vue的hash模式，這是一種默認的方式。此時router/index.js文件是這樣的：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

如果想去掉這個#，可以將hash模式改成history模式（默認為hash模式），即在index.js中加上mode: “history”,如下圖：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

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

export default router

效果如下：

用Hash模式來實現簡易路由：

首先定義四個a鏈接，每個a鏈接對應一個hash值.再定義一個component標簽來展示對應的組件

當點擊每個a鏈接，改變地址欄中的url的hash值，當hash值變化，我們期望在主體區展示對應的組件。但是如何才能監聽到hash值的變化呢？就要用到一個事件，叫window.onhashchange事件，通過hash值的變化就自動觸發這個事件，在事件中就能通過location.hash拿到最新的hash值，然后做switchcase判斷，從而決定在主體區域去渲染什么樣的組件。

 后端路由---->Ajax前端渲染---->SPA(前端路由)的演變過程：

在早期web開發中，絕大多數網站都采用后端路由的形式來渲染每一個網頁，

后端路由指的是url請求地址與服務器資源之間的對應關系。后端路由的渲染方式是后端渲染，這樣渲染方式是有性能問題的。后端渲染存在性能問題，假設用戶與服務器之間經常要提交表單這樣的數據交互行為，后端路由就會造成網頁的頻繁刷新，體驗非常的差，因此就出現了Ajax技術，實現前端頁面的局部刷新，很大程度上提高用戶體驗，但是單純的Ajax技術並不支持瀏覽器的前進后退這些歷史操作，也就是說瀏覽器沒有辦法保存用戶在網頁上的瀏覽狀態的，因此前端又出現了SPA單頁面程序開發技術，所謂的SPA指的是整個網站只有一個頁面，內容的變化通過Ajax局部更新實現，同時SPA還支持瀏覽器地址欄的前進和后退操作。如何才能實現SPA呢？SPA最核心的技術是前端路由，前端路由的本質是用戶事件與事件處理函數之間的對應關系。通過前端路由，可以提高用戶的操作體驗，同時也能讓網頁打開速度更快。

SPA的優缺點：

SPA的優點：1、用戶操作體驗好，用戶不用刷新頁面，整個交互過程都是通過Ajax來操作，故是客戶端渲染。2、適合前后端分離開發；

SPA的缺點：1、首頁加載慢，SPA會將js、CSS打包成一個文件，在加載頁面顯示的時候加載打包文件，如果打包文件較大或者網速慢則用戶體驗不好，所以門戶不采用單頁面應用。

2、SEO不友好，故門戶、課程介紹不采用單頁面應用，而管理系統采用單頁面應用。

哈希路由（hash模式）和歷史路由（history模式）源碼解析：

隨着前端應用的業務功能越來越復雜、用戶對於使用體驗的要求越來越高，單頁應用（SPA）成為前端應用的主流形式。大型單頁應用最顯著特點之一就是采用前端路由系統，通過改變URL，在不重新請求頁面的情況下，更新頁面視圖。“更新視圖但不重新請求頁面”是前端路由原理的核心之一，目前在瀏覽器環境中這一功能的實現主要有兩種方式：

1、利用URL中的hash（“#”）

2、利用History interface在 HTML5中新增的方法

模式參數

在vue-router中是通過mode這一參數控制路由的實現模式的：

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

源碼：

export default class VueRouter {
  
  mode: string; // 傳入的字符串參數，指示history類別
  history: HashHistory | HTML5History | AbstractHistory; // 實際起作用的對象屬性，必須是以上三個類的枚舉
  fallback: boolean; // 如瀏覽器不支持，'history'模式需回滾為'hash'模式
  
  constructor (options: RouterOptions = {}) {
    
    let mode = options.mode || 'hash' // 默認為'hash'模式
    this.fallback = mode === 'history' && !supportsPushState // 通過supportsPushState判斷瀏覽器是否支持'history'模式
    if (this.fallback) {
      mode = 'hash'
    }
    if (!inBrowser) {
      mode = 'abstract' // 不在瀏覽器環境下運行需強制為'abstract'模式
    }
    this.mode = mode

    // 根據mode確定history實際的類並實例化
    switch (mode) {
      case 'history':
        this.history = new HTML5History(this, options.base)
        break
      case 'hash':
        this.history = new HashHistory(this, options.base, this.fallback)
        break
      case 'abstract':
        this.history = new AbstractHistory(this, options.base)
        break
      default:
        if (process.env.NODE_ENV !== 'production') {
          assert(false, `invalid mode: ${mode}`)
        }
    }
  }

  init (app: any /* Vue component instance */) {
    
    const history = this.history

    // 根據history的類別執行相應的初始化操作和監聽
    if (history instanceof HTML5History) {
      history.transitionTo(history.getCurrentLocation())
    } else if (history instanceof HashHistory) {
      const setupHashListener = () => {
        history.setupListeners()
      }
      history.transitionTo(
        history.getCurrentLocation(),
        setupHashListener,
        setupHashListener
      )
    }

    history.listen(route => {
      this.apps.forEach((app) => {
        app._route = route
      })
    })
  }

  // VueRouter類暴露的以下方法實際是調用具體history對象的方法
  push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
    this.history.push(location, onComplete, onAbort)
  }

  replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
    this.history.replace(location, onComplete, onAbort)
  }
}

1、作為參數傳入的字符串屬性mode只是一個標記，用來指示實際起作用的對象屬性history的實現類，兩者對應關系如下：

'history'：HTML5History

'hash'：HashHistory

'abstract'：AbstractHistory

2、在初始化對應的history之前，會對mode做一些校驗：若瀏覽器不支持HTML5History方式（通過supportsPushState變量判斷），則mode強制設為'hash'；若不是在瀏覽器環境下運行，則mode強制設為'abstract'

在瀏覽器環境下的兩種方式，分別就是在HTML5History，HashHistory兩個類中實現的。

hash（“#”）符號的本來作用是加在URL中指示網頁中的位置：

http://www.example.com/index.html#print

#符號后面的字符稱之為hash。

export function getHash (): string {
  // 因為兼容性問題 這里沒有直接使用 window.location.hash
  // 因為 Firefox decode hash 值
  const href = window.location.href
  const index = href.indexOf('#')
  // 如果此時沒有 # 則返回 ''
  // 否則 取得 # 后的所有內容
  return index === -1 ? '' : href.slice(index + 1)
}

hash值以斜杠（slash）開頭：

// 保證 hash 以 / 開頭
function ensureSlash (): boolean {
  // 得到 hash 值
  const path = getHash()
  // 如果說是以 / 開頭的 直接返回即可
  if (path.charAt(0) === '/') {
    return true
  }
  // 不是的話 需要手工保證一次 替換 hash 值
  replaceHash('/' + path)
  return false
}

獲取不帶base的location。

// 得到 不帶 base 值的 location
export function getLocation (base: string): string {
  let path = window.location.pathname
  if (base && path.indexOf(base) === 0) {
    path = path.slice(base.length)
  }
  // 是包含 search 和 hash 的
  return (path || '/') + window.location.search + window.location.hash
}

在不帶base的location前添加/#,

如果設置的是 history 但是如果瀏覽器不支持的話 ，強制退回到 hash。如果說此時的地址不是以 /# 開頭的，需要做一次降級處理 降級為 hash 模式下應有的 /# 開頭

 checkFallback () {
    // 得到除去 base 的真正的 location 值
    const location = getLocation(this.base)
    if (!/^\/#/.test(location)) {
      // 如果說此時的地址不是以 /# 開頭的
      // 需要做一次降級處理 降級為 hash 模式下應有的 /# 開頭
      window.location.replace(
        cleanPath(this.base + '/#' + location)
      )
      return true
    }
  }

HashHistory

繼承History基類：

// 繼承 History 基類
export class HashHistory extends History {
  constructor (router: VueRouter, base: ?string, fallback: boolean) {
    // 調用基類構造器
    super(router, base)

    // 如果說是從 history 模式降級來的
    // 需要做降級檢查
    if (fallback && this.checkFallback()) {
      // 如果降級 且 做了降級處理 則什么也不需要做
      return
    }
    // 保證 hash 是以 / 開頭
    ensureSlash()
  }

可以看到在實例化過程中主要做兩件事情：針對於不支持 history api 的降級處理，以及保證默認進入的時候對應的 hash 值是以 / 開頭的，如果不是則替換。

友善高級的 HTML5History

HTML5History 則是利用 history.pushState/repaceState API 來完成 URL 跳轉而無須重新加載頁面，頁面地址和正常地址無異；

// ...
import { cleanPath } from '../util/path'
import { History } from './base'
// 記錄滾動位置工具函數
import {
  saveScrollPosition,
  getScrollPosition,
  isValidPosition,
  normalizePosition,
  getElementPosition
} from '../util/scroll-position'

// 生成唯一 key 作為位置相關緩存 key
const genKey = () => String(Date.now())
let _key: string = genKey()

export class HTML5History extends History {
  constructor (router: VueRouter, base: ?string) {
    // 基類構造函數
    super(router, base)

    // 定義滾動行為 option
    const expectScroll = router.options.scrollBehavior
    // 監聽 popstate 事件 也就是
    // 瀏覽器歷史記錄發生改變的時候（點擊瀏覽器前進后退 或者調用 history api ）
    window.addEventListener('popstate', e => {
// ...
    })

    if (expectScroll) {
      // 需要記錄滾動行為 監聽滾動事件 記錄位置
      window.addEventListener('scroll', () => {
        saveScrollPosition(_key)
      })
    }
  }
// ...
}
// ...

可以看到在這種模式下，初始化作的工作相比 hash 模式少了很多，只是調用基類構造函數以及初始化監聽事件，不需要再做額外的工作。

history 改變

history 改變可以有兩種，一種是用戶點擊鏈接元素，一種是更新瀏覽器本身的前進后退導航來更新。

第一種方式：更新瀏覽器本身的前進后退導航

先來說瀏覽器導航發生變化的時候會觸發對應的事件：對於 hash 模式而言觸發 window 的 hashchange 事件，對於 history 模式而言則觸發 window 的 popstate 事件。

hash模式

 onHashChange () {
    // 不是 / 開頭
    if (!ensureSlash()) {
      return
    }
    // 調用 transitionTo
    this.transitionTo(getHash(), route => {
      // 替換 hash
      replaceHash(route.fullPath)
    })
  }

replaceHash()方法直接調用 replace 強制替換 以避免產生“多余”的歷史記錄，其實就是更新瀏覽器的 hash 值，push 和 replace 的場景下都是一個效果。

function replaceHash (path) {
  const i = window.location.href.indexOf('#')
  // 直接調用 replace 強制替換 以避免產生“多余”的歷史記錄
  // 主要是用戶初次跳入 且hash值不是以 / 開頭的時候直接替換
  // 其余時候和push沒啥區別 瀏覽器總是記錄hash記錄
  window.location.replace(
    window.location.href.slice(0, i >= 0 ? i : 0) + '#' + path
  )
}

transitionTo 方法的功能是路由跳轉，它接收三個參數：1. location：要轉向的路由地址。2. onComplete：完成后的回調。3. onAbort：取消時的回調

// 確認過渡
  confirmTransition (route: Route, cb: Function) {
    const current = this.current  // 當前路由
    // 如果是相同 直接返回
    if (isSameRoute(route, current)) {  // 如果目標路由route與當前路由相同，取消跳轉
      this.ensureURL()
      return
    }
    const {
      deactivated,
      activated
    } = resolveQueue(this.current.matched, route.matched)

    // 整個切換周期的隊列
    const queue: Array<?NavigationGuard> = [].concat(
      // leave 的鈎子
      extractLeaveGuards(deactivated),
      // 全局 router before hooks
      this.router.beforeHooks,
      // 將要更新的路由的 beforeEnter 鈎子
      activated.map(m => m.beforeEnter),
      // 異步組件
      resolveAsyncComponents(activated)
    )

    this.pending = route
    // 每一個隊列執行的 iterator 函數
    const iterator = (hook: NavigationGuard, next) => {
// ...
    }
    // 執行隊列 leave 和 beforeEnter 相關鈎子
    runQueue(queue, iterator, () => {
//...
    })
  }

history模式

window.addEventListener('popstate', e => {
  // 取得 state 中保存的 key
  _key = e.state && e.state.key
  // 保存當前的先
  const current = this.current
  // 調用 transitionTo
  this.transitionTo(getLocation(this.base), next => {
    if (expectScroll) {
      // 處理滾動
      this.handleScroll(next, current, true)
    }
  })
})

第二種方式：點擊鏈接交互

即點擊了 <router-link>，回顧下這個組件在渲染的時候做的事情：

// ...
  render (h: Function) {
// ...

    // 事件綁定
    const on = {
      click: (e) => {
        // 忽略帶有功能鍵的點擊
        if (e.metaKey || e.ctrlKey || e.shiftKey) return
        // 已阻止的返回
        if (e.defaultPrevented) return
        // 右擊
        if (e.button !== 0) return
        // `target="_blank"` 忽略
        const target = e.target.getAttribute('target')
        if (/\b_blank\b/i.test(target)) return
        // 阻止默認行為 防止跳轉
        e.preventDefault()
        if (this.replace) {
          // replace 邏輯
          router.replace(to)
        } else {
          // push 邏輯
          router.push(to)
        }
      }
    }
    // 創建元素需要附加的數據們
    const data: any = {
      class: classes
    }

    if (this.tag === 'a') {
      data.on = on
      data.attrs = { href }
    } else {
      // 找到第一個 <a> 給予這個元素事件綁定和href屬性
      const a = findAnchor(this.$slots.default)
      if (a) {
        // in case the <a> is a static node
        a.isStatic = false
        const extend = _Vue.util.extend
        const aData = a.data = extend({}, a.data)
        aData.on = on
        const aAttrs = a.data.attrs = extend({}, a.data.attrs)
        aAttrs.href = href
      } else {
        // 沒有 <a> 的話就給當前元素自身綁定時間
        data.on = on
      }
    }
    // 創建元素
    return h(this.tag, data, this.$slots.default)
  }
// ...

這里一個關鍵就是綁定了元素的 click 事件，當用戶觸發后，會調用 router 的 push 或 replace 方法來更新路由。下邊就來看看這兩個方法定義，

 push (location: RawLocation) {
    this.history.push(location)
  }

  replace (location: RawLocation) {
    this.history.replace(location)
  }

HashHistory

// ...
  push (location: RawLocation) {
    // 調用 transitionTo
    this.transitionTo(location, route => {
// ...
    })
  }

  replace (location: RawLocation) {
    // 調用 transitionTo
    this.transitionTo(location, route => {
// ...
    })
  }
// ...

操作是類似的，主要就是調用基類的 transitionTo 方法來過渡這次歷史的變化，在完成后更新當前瀏覽器的 hash 值。

HashHistory的push方法：

將新路由添加到瀏覽器訪問歷史的棧頂

 push (location: RawLocation) {
    // 調用 transitionTo
    this.transitionTo(location, route => {
      // 完成后 pushHash
      pushHash(route.fullPath)
    })
  }

function pushHash (path) {
  window.location.hash = path
}

 HashHistory的replace方法：

replace()方法與push()方法不同之處在於，它並不是將新路由添加到瀏覽器訪問歷史的棧頂，而是替換掉當前的路由

replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
  this.transitionTo(location, route => {
    replaceHash(route.fullPath)
    onComplete && onComplete(route)
  }, onAbort)
}
  
function replaceHash (path) {
  const i = window.location.href.indexOf('#')
  window.location.replace(
    window.location.href.slice(0, i >= 0 ? i : 0) + '#' + path
  )
}

 location的replace（）方法可用一個新頁面取代當前頁面。

其實就是更新瀏覽器的 hash 值，push 和 replace 的場景下都是一個效果。

transitionTo (location: RawLocation, cb?: Function) {
    // 調用 match 得到匹配的 route 對象
    const route = this.router.match(location, this.current)
    // 確認過渡
    this.confirmTransition(route, () => {
      // 更新當前 route 對象
      this.updateRoute(route)
      cb && cb(route)
      // 子類實現的更新url地址
      // 對於 hash 模式的話 就是更新 hash 的值
      // 對於 history 模式的話 就是利用 pushstate / replacestate 來更新
      // 瀏覽器地址
      this.ensureURL()
    })
  }
  // 確認過渡
  confirmTransition (route: Route, cb: Function) {
    const current = this.current
    // 如果是相同 直接返回
    if (isSameRoute(route, current)) {
      this.ensureURL()
      return
    }
    const {
      deactivated,
      activated
    } = resolveQueue(this.current.matched, route.matched)

    // 整個切換周期的隊列
    const queue: Array<?NavigationGuard> = [].concat(
      // leave 的鈎子
      extractLeaveGuards(deactivated),
      // 全局 router before hooks
      this.router.beforeHooks,
      // 將要更新的路由的 beforeEnter 鈎子
      activated.map(m => m.beforeEnter),
      // 異步組件
      resolveAsyncComponents(activated)
    )

    this.pending = route
    // 每一個隊列執行的 iterator 函數
    const iterator = (hook: NavigationGuard, next) => {
// ...
    }
    // 執行隊列 leave 和 beforeEnter 相關鈎子
    runQueue(queue, iterator, () => {
//...
    })
  }

回到 confirmTransition 的回調，最后還做了一件事情 ensureURL：

ensureURL (push?: boolean) {
  const current = this.current.fullPath
  if (getHash() !== current) {
    push ? pushHash(current) : replaceHash(current)
  }
}

此時 push 為 undefined，所以調用 replaceHash 更新瀏覽器 hash 值。