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

一、基礎(chǔ)知識(shí)概覽

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

第二章 - 常見(jiàn)的指令的使用（posted at 2018-11-01）

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

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

第五章 - 計(jì)算屬性與監(jiān)聽(tīng)器（posted at 2018-11-08）

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

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

二、深入了解 Vue

第八章 - 組件的基礎(chǔ)知識(shí)（posted at 2019-01-03）

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

第十章 - 組件間的數(shù)據(jù)通信（posted at 2019-04-01）

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

第十二章 - 使用 Vue Router 實(shí)現(xiàn) Vue 中的前端路由控制（posted at 2019-05-22）

????????前端路由是什么？如果你之前從事的是后端的工作，或者雖然有接觸前端，但是并沒(méi)有使用到單頁(yè)面應(yīng)用的話，這個(gè)概念對(duì)你來(lái)說(shuō)還是會(huì)很陌生的。那么，為什么會(huì)在單頁(yè)面應(yīng)用中存在這么一個(gè)概念，以及，前端路由與我們后端的路由有什么異同呢。本章，我們就來(lái)簡(jiǎn)單介紹下前端路由的概念，以及如何在 Vue 中使用 Vue Router 來(lái)實(shí)現(xiàn)我們的前端路由。

????????倉(cāng)儲(chǔ)地址：Chapter02-Bronze Build Router in Vue.js

????????在傳統(tǒng)的多頁(yè)面應(yīng)用中，網(wǎng)站的每一個(gè) URL 地址都是對(duì)應(yīng)于服務(wù)器磁盤上的一個(gè)實(shí)際物理文件。例如，當(dāng)我們?cè)L問(wèn) www.yousite.com/index.html 這個(gè)網(wǎng)址的時(shí)候，服務(wù)器會(huì)自動(dòng)把我們的請(qǐng)求對(duì)應(yīng)到當(dāng)前站點(diǎn)路徑下面的 index.html 文件，然后再給予響應(yīng)，將這個(gè)文件返回給瀏覽器。當(dāng)我們跳轉(zhuǎn)到別的頁(yè)面上時(shí)，毫無(wú)疑問(wèn)則會(huì)再重復(fù)一遍上面的過(guò)程。

????????但是在單頁(yè)面應(yīng)用中，整個(gè)項(xiàng)目中只會(huì)存在一個(gè) html 文件，當(dāng)用戶切換頁(yè)面時(shí)，只是通過(guò)對(duì)這個(gè)唯一的 html 文件進(jìn)行動(dòng)態(tài)重寫，從而達(dá)到響應(yīng)用戶的請(qǐng)求。也就是說(shuō)，從切換頁(yè)面這個(gè)角度上說(shuō)，應(yīng)用只是在第一次打開(kāi)時(shí)請(qǐng)求了服務(wù)器（非服務(wù)端渲染的單頁(yè)應(yīng)用）。

????????因?yàn)樵L問(wèn)的頁(yè)面是并不真實(shí)存在的，所以如何正確的在一個(gè) html 文件中展現(xiàn)出用戶想要訪問(wèn)的信息就成為單頁(yè)面應(yīng)用需要考慮的問(wèn)題，而對(duì)于這一路由問(wèn)題的解決方案，為了與我們后端傳統(tǒng)意義上的路由進(jìn)行區(qū)別，就將此稱為前端路由。

????????一、前端路由的實(shí)現(xiàn)方式

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

????????hash 路由：hash 這個(gè)概念，可能聽(tīng)起來(lái)有些陌生，不過(guò)，其實(shí)我們?cè)谥暗那岸碎_(kāi)發(fā)中，其實(shí)是有所接觸的。例如，在某些情況下，我們需要定位頁(yè)面上的某些位置，就像下面的例子中展現(xiàn)的那樣，我想要通過(guò)點(diǎn)擊不同的按鈕就跳轉(zhuǎn)到指定的位置，這里我們使用的錨點(diǎn)定位其實(shí)就是 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 路由的本質(zhì)是瀏覽器 location 對(duì)象中的 hash 屬性，它會(huì)記錄鏈接地址中 "#" 后面的內(nèi)容（e.g.：#part1）。因此，我們可以通過(guò)監(jiān)聽(tīng) window.onhashchange 事件獲取到跳轉(zhuǎn)前后訪問(wèn)的地址，從而實(shí)現(xiàn)地址切換的目的。

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

????????通過(guò)這兩個(gè)新增的 API，就可以實(shí)現(xiàn)無(wú)刷新的更改地址欄鏈接，配合 AJAX 就可以做到整個(gè)頁(yè)面的無(wú)刷新跳轉(zhuǎn)，具體實(shí)現(xiàn)的原理大家可以看看這篇文章 =》HTML5 簡(jiǎn)介（三）：利用 History API 無(wú)刷新更改地址欄

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

????????二、 路由實(shí)現(xiàn)

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

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

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

<router-link to="/home">主頁(yè)router-link>


<router-link to="/home" tag="button">主頁(yè)router-link>

????????同時(shí)，從上圖可以看出，當(dāng)前的鏈接地址為 #/home，也就是說(shuō)，通過(guò) router-link 生成的標(biāo)簽，當(dāng)頁(yè)面地址與對(duì)應(yīng)的路由規(guī)則匹配成功后，將自動(dòng)設(shè)置 class 屬性值為 .router-link-active。當(dāng)然，我們也可以通過(guò)指定 active-class 屬性或者在構(gòu)造 VueRouter 對(duì)象時(shí)使用 linkActiveClass 來(lái)自定義鏈接激活時(shí)使用的 CSS 類名。

<router-link to="/home" active-class="aaaa">主頁(yè)router-link>


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

????????當(dāng)路由表構(gòu)建完成后，對(duì)于指向路由表中的鏈接，需要在頁(yè)面上找一個(gè)地方去顯示已經(jīng)渲染完成后的組件，這時(shí)，我們就需要使用 router-view 標(biāo)簽去告訴程序，我們需要將渲染后的組件顯示在當(dāng)前位置。

????????在下面的示例代碼中，模擬了 Vue 中路由的使用，當(dāng)訪問(wèn) #/home 時(shí)會(huì)進(jìn)行加載 home 組件，而當(dāng)鏈接跳轉(zhuǎn)到 #/account 時(shí)則會(huì)加載 account 組件。同時(shí)，我們可以發(fā)現(xiàn)，在 account 組件中又包含了兩個(gè)子路由，通過(guò)點(diǎn)擊 account 組件中的子路由地址，從而加載對(duì)應(yīng)的 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">主頁(yè)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">注冊(cè)router-link>

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

<script>
    // 1、定義路由跳轉(zhuǎn)的組件模板
    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、掛載到當(dāng)前 Vue 實(shí)例上
    const vm = new Vue({
        el: "#app",
        data: {},
        methods: {},
        router: router
    });
script>

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

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

????????這一章主要是介紹了如何使用 Vue Router 在 Vue 中構(gòu)建我們的前端路由。在實(shí)際開(kāi)發(fā)中，對(duì)于一個(gè)路徑，可能會(huì)對(duì)應(yīng)到多個(gè)組件，這時(shí)，如何將多個(gè)組件綁定到一個(gè)路徑下，就是我們需要解決的問(wèn)題。另外，在實(shí)際使用中我們會(huì)遇到路由傳參，可能會(huì)因?yàn)?hash 路由不漂亮，從而準(zhǔn)備采用 history 路由，對(duì)于這些需求的實(shí)現(xiàn)，將放在下一章中進(jìn)行學(xué)習(xí)。

????????1、從頭開(kāi)始學(xué)習(xí)vue-router

????????2、單頁(yè)面應(yīng)用路由的兩種實(shí)現(xiàn)方式

????????3、你需要知道的單頁(yè)面路由實(shí)現(xiàn)原理

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

????????5、前端路由實(shí)現(xiàn)原理（history）

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

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

????????個(gè)人博客：yuiter.com

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