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

本文轉載自查看原文 2019-01-07 10:01 784 前端/ vue2

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

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

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

示例：

<!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：

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

page2.html：

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

運行結果：

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

一、Hjax（Hash + Ajax）

1.1、原理

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

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

<!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.2、URL詳解

URL是統一資源定位符，對可以從互聯網上得到的資源的位置和訪問方法的一種簡潔的表示，是互聯網上標准資源的地址。互聯網上的每個文件都有一個唯一的URL，它包含的信息指出文件的位置以及瀏覽器應該怎么處理它。URI是統一資源標識符，而URL是統一資源定位符，我們把URL理解為是URI的一個子類，而另一種子類是URN。url是統一資源定位符，對可以從互聯網上得到的資源的位置和訪問方法的一種簡潔的表示，是互聯網上標准資源的地址。互聯網上的每個文件都有一個唯一的URL，它包含的信息指出文件的位置以及瀏覽器應該怎么處理它。URL中所有的字符都是ASCII字符集，如果出現非ASCII字符集，比如中文，瀏覽器會先進行編碼再進行傳輸。

1.2.1、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

拆解如下: