前端MVC Vue2學習總結（八）——前端路由

時間 2019-11-12

原文原文鏈接

路由是根據不一樣的 url 地址展現不一樣的內容或頁面，早期的路由都是後端直接根據 url 來 reload 頁面實現的，即後端控制路由。javascript

後來頁面愈來愈複雜，服務器壓力愈來愈大，隨着AJAX（異步刷新技術）的出現，頁面實現非 reload 就能刷新數據，讓前端也能夠控制 url 自行管理，前端路由所以而生。html

若是直接使用AJAX加載頁面片斷是能夠實現單頁效果的，但這樣會破壞瀏覽器的前進與後退功能，使用Hjax或Pjax技術後便可以實現單頁無刷新效果又不會影響前進與後退功能。前端

示例：vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模擬單頁</title>

</head>
<body>
<script src="../../js/jquery-1.12.4/jquery-1.12.4.js"></script>
<a href="" id="page1">頁面一</a> |

<a href="" id="page2">頁面二</a>

<div id="container">
</div>

<script>
    $("#page1").click(function () {
        $("#container").load("page1.html");
        return false;
    });

    $("#page2").click(function () {
        $.ajax({
            url:"page2.html",
            type:"get",
            dataType:"html",
            success:function (data) {
                var ctx=$("<html/>").html(data);
                //方法一
                console.log(ctx.find("div"));
                //方法二
                console.log($("div",ctx));

                $("#container").html($("body",ctx));
            }
        });
        return false;
    });
</script>
</body>
</html>

page1.html：html5

<div style="background: antiquewhite">
    <h2>這是頁面一</h2>
</div>

page2.html：java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>這是頁面二</title>
</head>
<body>
<div style="background: dodgerblue">
    <h2>這是頁面二</h2>
</div>
</body>
</html>

運行結果：node

單頁面應用的實現，就是由於前端路由，前端路由實現主要有下面幾種方法：jquery

1、Hjax（Hash + Ajax）

1.一、原理

原理：url 中常會出現 #，一能夠表示錨點（如回到頂部按鈕的原理），二是路由裏的錨點（hash）。Web 服務並不會解析 hash，也就是說 # 後的內容 Web 服務都會自動忽略，可是 JavaScript 是能夠經過 window.location.hash 讀取到的，讀取到路徑加以解析以後就能夠響應不一樣路徑的邏輯處理。webpack

hashchange 事件(監聽 hash 變化觸發的事件)，當用 window.location 處理哈希的改變時不會從新渲染頁面，而是看成新頁面加到歷史記錄中，這樣咱們跳轉頁面就能夠在 hashchange 事件中註冊 ajax 從而改變頁面內容。git

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模擬單頁 - hash</title>

</head>
<body>
<script src="../../js/jquery-1.12.4/jquery-1.12.4.js"></script>
<a href="#/page1.html" id="page1">頁面一</a> |

<a href="#/page2.html" id="page2">頁面二</a>


<button onclick="getHash()">得到hash</button>
<button onclick="setHash()">修改hash</button>
<div id="container">
</div>

<script>

    $("a[href]").click(function () {
        var url = $(this).prop("href").split("#")[1].substring(1);
        $.ajax({
            url: url,
            type: "get",
            dataType: "html",
            success: function (data) {
                var ctx = $("<html/>").html(data);
                var root = $("body", ctx);
                if (root.size() > 0) {
                    $("#container").html(root);
                } else {
                    $("#container").html(data);
                }
            }
        });
    });

    function getHash() {
        console(location.hash);
    }

    function setHash() {
        location.hash = "123456";
    }
</script>
</body>
</html>

View Code

運行結果：

這裏並無解決前進與後退失效的問題。

1.二、URL詳解

URL是統一資源定位符，對能夠從互聯網上獲得的資源的位置和訪問方法的一種簡潔的表示，是互聯網上標準資源的地址。互聯網上的每一個文件都有一個惟一的URL，它包含的信息指出文件的位置以及瀏覽器應該怎麼處理它。URI是統一資源標識符，而URL是統一資源定位符，咱們把URL理解爲是URI的一個子類，而另外一種子類是URN。url是統一資源定位符，對能夠從互聯網上獲得的資源的位置和訪問方法的一種簡潔的表示，是互聯網上標準資源的地址。互聯網上的每一個文件都有一個惟一的URL，它包含的信息指出文件的位置以及瀏覽器應該怎麼處理它。URL中全部的字符都是ASCII字符集，若是出現非ASCII字符集，好比中文，瀏覽器會先進行編碼再進行傳輸。

1.2.一、URL的構成

URL的構成基本以下

scheme:[//[user[:password]@]host[:port]][/path][?query][#fragment]

舉例以下:

http://zhangguo:123456@www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument

拆解以下: