摘要：而路由則是使用了中新增的事件和事件。總結這一章主要是介紹了如何使用在中構建我們的前端路由。

一、基礎知識概覽

第一章 - 一些基礎概念（posted at 2018-10-31）

第二章 - 常見的指令的使用（posted at 2018-11-01）

第三章 - 事件修飾符的使用（posted at 2018-11-02）

第四章 - 頁面元素樣式的設定（posted at 2018-11-05）

第五章 - 計算屬性與監聽器（posted at 2018-11-08）

第六章 - 按鍵修飾符的使用（posted at 2018-11-15）

第七章 - Vue 實例的生命周期（posted at 2018-12-13）

二、深入了解 Vue

第八章 - 組件的基礎知識（posted at 2019-01-03）

第九章 - 組件基礎再探（data、props）（posted at 2019-03-09）

第十章 - 組件間的數據通信（posted at 2019-04-01）

第十一章 - Vue 中 ref 的使用（posted at 2019-04-29）

第十二章 - 使用 Vue Router 實現 Vue 中的前端路由控制（posted at 2019-05-22）

????????前端路由是什么？如果你之前從事的是后端的工作，或者雖然有接觸前端，但是并沒有使用到單頁面應用的話，這個概念對你來說還是會很陌生的。那么，為什么會在單頁面應用中存在這么一個概念，以及，前端路由與我們后端的路由有什么異同呢。本章，我們就來簡單介紹下前端路由的概念，以及如何在 Vue 中使用 Vue Router 來實現我們的前端路由。

????????倉儲地址：Chapter02-Bronze Build Router in Vue.js

????????在傳統的多頁面應用中，網站的每一個 URL 地址都是對應于服務器磁盤上的一個實際物理文件。例如，當我們訪問 www.yousite.com/index.html 這個網址的時候，服務器會自動把我們的請求對應到當前站點路徑下面的 index.html 文件，然后再給予響應，將這個文件返回給瀏覽器。當我們跳轉到別的頁面上時，毫無疑問則會再重復一遍上面的過程。

????????但是在單頁面應用中，整個項目中只會存在一個 html 文件，當用戶切換頁面時，只是通過對這個唯一的 html 文件進行動態重寫，從而達到響應用戶的請求。也就是說，從切換頁面這個角度上說，應用只是在第一次打開時請求了服務器（非服務端渲染的單頁應用）。

????????因為訪問的頁面是并不真實存在的，所以如何正確的在一個 html 文件中展現出用戶想要訪問的信息就成為單頁面應用需要考慮的問題，而對于這一路由問題的解決方案，為了與我們后端傳統意義上的路由進行區別，就將此稱為前端路由。

????????一、前端路由的實現方式

????????目前的前端路由的實現方式主要是通過 hash 路由匹配或者是采用 html5 中的 history api 這兩種，也就是說，不管是 hash 路由還是使用 history 路由模式，其實都是基于瀏覽器自身的特性。

????????hash 路由：hash 這個概念，可能聽起來有些陌生，不過，其實我們在之前的前端開發中，其實是有所接觸的。例如，在某些情況下，我們需要定位頁面上的某些位置，就像下面的例子中展現的那樣，我想要通過點擊不同的按鈕就跳轉到指定的位置，這里我們使用的錨點定位其實就是 hash。

<div id="content">
  <div class="btn-container">
    <a class="btn" href="#image1">圖片1a>
    <a class="btn" href="#image2">圖片2a>
  div>
  <img src="./xxx/xxx.jpg" id="image1">
  <img src="./xxx/xxx.jpg" id="image2">
div>

????????hash 路由的本質是瀏覽器 location 對象中的 hash 屬性，它會記錄鏈接地址中 "#" 后面的內容（e.g.：#part1）。因此，我們可以通過監聽 window.onhashchange 事件獲取到跳轉前后訪問的地址，從而實現地址切換的目的。

????????history 路由：在之前的 html 版本中，我們可以通過 history.back(), history.forward()和 history.go() 方法來完成在用戶歷史記錄中向后和向前的跳轉。而 history 路由則是使用了 html5 中新增的 pushState 事件和 replaceState() 事件。

????????通過這兩個新增的 API，就可以實現無刷新的更改地址欄鏈接，配合 AJAX 就可以做到整個頁面的無刷新跳轉，具體實現的原理大家可以看看這篇文章 =》HTML5 簡介（三）：利用 History API 無刷新更改地址欄

????????在 Vue 中，Vue Router 是官方提供的路由管理器。它和 Vue.js 的核心深度集成，因此，不管是采用 hash 的方式還是使用 history api 實現我們的前端路由都有很好的支持，所以這里我們采用 Vue Router 這一組件來實現我們的前端路由。

????????二、 路由實現

????????首先我們需要將 Vue Router 添加引用到我們的項目中，這里我還是采用直接引用 js 文件的方式為我們的示例代碼添加前端路由支持。

????????在 Vue 中使用 Vue Router 構建單頁面應用，我們只需要將組件 (components) 映射到定義的路由 (routes) 規則中，然后告訴 Vue Router 在哪里渲染它們，并將這個路由配置掛載到 Vue 實例節點上即可。

????????在 Vue Router 中，我們使用 router-link 標簽來渲染鏈接，當然，默認生成的是 a 標簽，如果你想要將路由信息生成別的 html 標簽，則可以使用 tag 屬性指明需要生成的標簽類型。

<router-link to="/home">主頁router-link>


<router-link to="/home" tag="button">主頁router-link>

????????同時，從上圖可以看出，當前的鏈接地址為 #/home，也就是說，通過 router-link 生成的標簽，當頁面地址與對應的路由規則匹配成功后，將自動設置 class 屬性值為 .router-link-active。當然，我們也可以通過指定 active-class 屬性或者在構造 VueRouter 對象時使用 linkActiveClass 來自定義鏈接激活時使用的 CSS 類名。

<router-link to="/home" active-class="aaaa">主頁router-link>


const router = new VueRouter({
    routes: [],
    linkActiveClass: "aaaaa"
})

????????當路由表構建完成后，對于指向路由表中的鏈接，需要在頁面上找一個地方去顯示已經渲染完成后的組件，這時，我們就需要使用 router-view 標簽去告訴程序，我們需要將渲染后的組件顯示在當前位置。

????????在下面的示例代碼中，模擬了 Vue 中路由的使用，當訪問 #/home 時會進行加載 home 組件，而當鏈接跳轉到 #/account 時則會加載 account 組件。同時，我們可以發現，在 account 組件中又包含了兩個子路由，通過點擊 account 組件中的子路由地址，從而加載對應的 login 組件和 register 組件。

<script src="../../lib/vue.js">script>
<script src="../../lib/vue-router.js">script>
<style>
    .container {
        background-color: aquamarine;
        margin-top: 20px;
        width: 740px;
        height: 300px;
    }
style>

<div id="app">

    
    <router-link to="/home">主頁router-link>
    <router-link to="/account">賬戶router-link>

    <div class="container">
        
        <router-view>router-view>
    div>
div>

<template id="tmpl">
    <div>
        <h3> account page h3>

        
        <router-link to="/account/login">登錄router-link>
        <router-link to="/account/register">注冊router-link>

        
        <router-view>router-view>
    div>
template>

<script>
    // 1、定義路由跳轉的組件模板
    const home = {
        template: "
 home page 
"
    }

    const account = {
        template: "#tmpl"
    }

    const login = {
        template: "
 login page
"
    }

    const register = {
        template: "
 register page
"
    }

    // 2、定義路由信息
    const routes = [{
            path: "/",
            redirect: "/home"
        },
        {
            path: "/home",
            component: home
        },
        {
            path: "/account",
            component: account,
            children: [{
                    path: "login",
                    component: login
                },
                {
                    path: "register",
                    component: register
                }
            ]
        }
    ]

    const router = new VueRouter({
        //mode: "history", //使用 history 模式還是 hash 路由模式
        routes
    })

    // 3、掛載到當前 Vue 實例上
    const vm = new Vue({
        el: "#app",
        data: {},
        methods: {},
        router: router
    });
script>

????????例如，這里的 login 組件和 register 組件，它們都是位于 account 組件中的，因此，在構建 url 時，我們應該將該地址位于 /account url 后面，從而更好地表達這種關系。所以這里，我們在 account 組件中又添加了一個 router-view 標簽，用來渲染出嵌套的組件內容。同時，通過在定義 routes 時在參數中使用 children 屬性，從而達到配置嵌套路由信息的目的。

????????PS：以 / 開頭的嵌套路徑會被當作根路徑，而我們的 login 組件和 register 組件都是包含在 account 中，所以這里直接定義 path 參數即可。

????????這一章主要是介紹了如何使用 Vue Router 在 Vue 中構建我們的前端路由。在實際開發中，對于一個路徑，可能會對應到多個組件，這時，如何將多個組件綁定到一個路徑下，就是我們需要解決的問題。另外，在實際使用中我們會遇到路由傳參，可能會因為 hash 路由不漂亮，從而準備采用 history 路由，對于這些需求的實現，將放在下一章中進行學習。

????????1、從頭開始學習vue-router

????????2、單頁面應用路由的兩種實現方式

????????3、你需要知道的單頁面路由實現原理

????????4、面試官: 你了解前端路由嗎");

????????5、前端路由實現原理（history）

 占坑
????????作者：墨墨墨墨小宇

????????個人簡介：96年生人，出生于安徽某四線城市，畢業于Top 10000000 院校。.NET程序員，槍手死忠，喵星人。于2016年12月開始.NET程序員生涯，微軟.NET技術的堅定堅持者，立志成為云養貓的少年中面向谷歌編程最厲害的.NET程序員。

????????個人博客：yuiter.com

????????博客園博客：www.cnblogs.com/danvic712