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

拆解以下: