前端MVC 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

拆解如下: