没有请求的路由

在传统开发中，浏览器点击一个超链接，就会像后端web服务器发送一个html文档请求，然后页面刷新。但开始单页面开发后，就完全不同了。

单页面？这个概念难以理解。我用一个js作为整个web应用，然后再这个js中操作dom变化，以此来实现页面变化。这不叫单页面吗？这叫！但不完善，因为这种方法破坏了浏览器自带的导航功能。比如前进，后退。所以单页面前端应用要解决两件事内容变化、导航变化。这是现代前端成立的基础。

想必初次接触vue-router和nuxt的人很多对前端路由困惑。明明浏览器地址栏的链接变了，为什么浏览器却没有发送请求出去？至少我是很疑惑的。

这要归功于一个浏览器API，History API。学过wpf的人可能对这玩意不陌生，因为wpf也可以借助导航开发浏览器式应用程序。

实现一个简单的单页面应用

容器

单页面应用需要一个容器，这里我使用一个div作为页面的容器。

<div id="app"></div>

实现页面

页面由模板和js代码组成。为了方便书写，各自放在一个script标签中。在模板中声明页面结构，用type="text/html"属性，使得我们可以获得语法感知的提示。然后再定义脚本，其实就是一个函数。在其中读取模板，请求数据，然后渲染页面到容器中

<!-- 模板 -->

	<script type="text/html" id="page1_html">

		<h1>首页</h1>

		<h2>这是第一个页面</h2>

		<div id="content"></div>

		<button style="background-color: lightcoral;" onclick="route.routeTo('/page2')">跳转到关于页面</button>

	</script>

<!-- 脚本 -->

	<script id="page1_js">

		function loadPage1(){

			//把模板页面替换进容器

			document.getElementById("app").innerHTML=document.getElementById("page1_html").innerHTML;

			//取数据然后生成内容，实际可能有ajax和fetch请求

			var data={

				text:"这是使用js生成的内容",

				id:1

			};

			document.getElementById("content").innerText=JSON.stringify(data);

		}

	</script>

前端路由调度

光有模板和脚本不行，我们还需要一个调度算法，用来调用页面渲染函数、更新导航。就是所谓的前端路由功能了。为了便于观察，我把声明的页面放在一个对象中,这就形成了路由表，方便搜索。当然，不要这个也是可以的，可以手动调用脚本渲染函数loadPage1。

const route={

    page:[

        {

            url:"/page1",

            module:loadPage1

        },

        {

            url:"/page2",

            module:loadPage2

        }

    ]

}

有了路由表之后，就可以添加调度算法，根据传入的url，寻找到对应的对象，添加到导航栈中，然后调用脚本渲染函数loadPageXXX

const route={

    routeTo:(url)=>{

        var page=route.page.find(r=>r.url==url);

        if(page==null){

            alert("文件不存在");

        }

        else{

            if(window.location.pathname==url)return;

            history.pushState(page.url,"",page.url);

            page.module("这里可以传参数");

        }

    }

}

//默认跳转到首页

route.routeTo("/page1");

到了这一个，已经实现了单页面。点击跳转按钮，地址栏会变，页面也会变。但有一个问题，点击浏览器导航按钮不管用。这是因为我们还没监听popstate事件处理这个操作。

因为点击导航按钮，地址栏会变，但页面渲染什么内容？这需要我们去处理。所以在这个事件中，我们根据url，从路由表中找到页面，然后渲染出来。

// 处理前进与后退

        window.addEventListener("popstate",(e)=>{

            var page=route.page.find(r=>r.url==e.state);

            if (page) {

                page.module("这里可以传参数");

            }

        })

效果

可以看到，切换页面时，地址栏变了，但并没有网络请求发出

完整代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>SPA页面</title>

</head>

<body>

    <div id="app"></div>

    <!-- 首页 -->

    <script type="text/html" id="page1_html">

        <h1>首页</h1>

        <h2>这是第一个页面</h2>

        <div id="content"></div>

        <button style="background-color: lightcoral;" onclick="route.routeTo('/page2')">跳转到关于页面</button>

    </script>

    <script id="page1_js">

        function loadPage1(){

            //把模板页面替换进容器

            document.getElementById("app").innerHTML=document.getElementById("page1_html").innerHTML;

            //取数据然后生成内容，实际可能有ajax和fetch请求

            var data={

                text:"这是使用js生成的内容",

                id:1

            };

            document.getElementById("content").innerText=JSON.stringify(data);

        }

    </script>

    <!-- 关于页 -->

    <script type="text/html" id="page2_html">

        <h1>关于</h1>

        <h2>这是第二个页面</h2>

        <div id="content"></div>

        <button style="background-color: lightgreen;" onclick="route.routeTo('/page1')">跳转到首页</button>

    </script>

    <script id="page2_js">

        function loadPage2(){

            //把模板页面替换进容器

            document.getElementById("app").innerHTML=document.getElementById("page2_html").innerHTML;

            //取数据然后生成内容，实际可能有ajax和fetch请求

            var data={

                text:"假设这里是网站信息",

                id:2

            };

            document.getElementById("content").innerText=JSON.stringify(data);

        }

    </script>

    <!-- 调度 -->

    <script>

        const route={

            page:[

                {

                    url:"/page1",

                    module:loadPage1

                },

                {

                    url:"/page2",

                    module:loadPage2

                }

            ],

            routeTo:(url)=>{

                var page=route.page.find(r=>r.url==url);

                if(page==null){

                    alert("文件不存在");

                }

                else{

                    if(window.location.pathname==url)return;

                    history.pushState(page.url,"",page.url);

                    page.module("这里可以传参数");

                }

            }

        }

        // 处理前进与后退

        window.addEventListener("popstate",(e)=>{

            var page=route.page.find(r=>r.url==e.state);

            if (page) {

                page.module("这里可以传参数");

            }

        })

        //默认跳转到首页

        route.routeTo("/page1");

    </script>

</body>

</html>

结语

从上面的实现中，你们也能看到，单页面应用就是把整个应用程序发送到浏览器，在浏览器里面去运行这个程序。所以相比与一个html文件，一旦应用上规模，体积也相应的会很大。这就牵扯出chunk，把应用分块的概念。第一次请求的时候只把调度部分、首页以及相关几个页面传入到浏览器，后续请求到了没有传输的页面时，再把后续文件传输过来。

由于我们的页面都是在一个网页中，本质上是传输了一个web服务器到浏览器中，在导航时，由js控制渲染。所以过渡效果、过滤器、请求管道、中间件、web服务器具有的东西在网页中实现也就有了可能。

但单页面应用SPA，这个web服务器一切都要归功于浏览器提供的那个关键的功能，History API

后端说，单页面SPA和前端路由是怎么回事的更多相关文章

单页面SPA应用路由原理 history hash
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 "invalid signature"错误解决方案
项目背景 vue-cli生成的单页面项目,router使用history模式.产品会在公众号内使用,需要添加微信JSSDK,做分享相关配置. 遇到的问题相关配置与JS接口安全域名都已经ok,发布后, ...
SPA单页面应用和MPA多页面应用（转）
原文:https://www.jianshu.com/p/a02eb15d2d70 单页面应用第一次进入页面时会请求一个html文件,刷新清除一下,切换到其他组件,此时路径也相应变化,但是并没有新的 ...
SPA（单页面应用）和MPA（多页面应用）
话不多说,直接看图,一目了然
使用react-router实现单页面应用路由
这是Webpack+React系列配置过程记录的第二篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境第二篇:使用react-rout ...
Angular——单页面与路由的使用
单页面 SPA(Single Page Application)指的是通单一页面展示所有功能,通过Ajax动态获取数据然后进行实时渲染,结合CSS3动画模仿原生App交互,然后再进行打包(使用工具把W ...
[后端人员耍前端系列]KnockoutJs篇：使用WebApi+Bootstrap+KnockoutJs打造单页面程序
一.前言在前一个专题快速介绍了KnockoutJs相关知识点,也写了一些简单例子,希望通过这些例子大家可以快速入门KnockoutJs.为了让大家可以清楚地看到KnockoutJs在实际项目中的应用 ...
前端单页面富应用(SPA)的实现
一. 什么是单页面富应用? 单页面应用:Single Page Application 概念:Web应用即使不刷新也在不同的页面间切换,解决浏览器前进.后退等机制被破坏等问题.并且页面访问会被浏览器保 ...
（转）前端：将网站打造成单页面应用SPA
前端:将网站打造成单页面应用SPA(一) Coffce 680 6月19日发布推荐 6 推荐收藏 85 收藏,3.1k 浏览前言不知你有没有发现,像Github.百度.微博等这些大站,已经不 ...
前端：将网站打造成单页面应用SPA
前端:将网站打造成单页面应用SPA 前言不知你有没有发现,像Github.百度.微博等这些大站,已经不再使用普通的a标签做跳转了.他们大多使用Ajax请求替代了a标签的默认跳转,然后使用HTML ...

随机推荐

k8s ingress部署安装
ingress概念 ingress与service,deployment同样都是k8s中的一种资源 ingress用于实现域名方式访问k8s内部应用安装ingress 1. 安装helm: wget ...
很多人讲不明白HTTPS，但是我能
很多人讲不明白HTTPS,但是我能今天我们用问答的形式,来彻底弄明白HTTPS的过程下面的问题都是小明和小丽两个人通信为例可以把小明想象成服务端,小丽想象成客户端 1. https是做什么用的 ...
js 判断闰年
首先,我们需要了解闰年的判断方式 1.能被4整除 2.并且不能被100整除 3.或者被400整除的其次我们再来回顾下函数封装的知识,所谓的函数封装就是将一段函数封装成一个工具,有人用到了拿过来就可以 ...
Qt-udp通信
1 简介参考视频:https://www.bilibili.com/video/BV1XW411x7NU?p=61 说明:UDP是面向无连接的,客户端并不与服务器不建立连接,直接向服务器发送数据, ...
使用POST方法向网站发送数据
POST方法向网站发送数据 server.py import flask app = flask.Flask(__name__) @app.route('/', methods=['GET','POS ...
Java基础(二)继承剖析
继承剖析 1 若是要直接调用父类的构造方法,不调用子类的方法则需要使用的是super()关键字 Publicclass Child extends Parent { Public C ...
关于ZYNQ-7000中断调试一点感想
背景在ZYNQ 平台下,需要对各种需要的底层接口进行初始化. 我依次调试了很多驱动,从最简单的网口到USB:再到读写PL端的寄存器(通过AXI总线,内存映射读写物理地址实现),到中断的时候一直卡着不 ...
python爬虫-xpath基础
# 准备一个html格式文档 doc = ''' <div> <ul> <li class="item-0"><a href=" ...
Golang channel底层是如何实现的？(深度好文)
Hi 你好,我是k哥.大厂搬砖6年的后端程序员. 我们知道,Go语言为了方便使用者,提供了简单.安全的协程数据同步和通信机制,channel.那我们知道channel底层是如何实现的吗?今天k哥就来聊 ...
Mac Docker设置国内镜像加速器
安装docker 点我直达设置国内加速镜像 { "experimental": false, "features": { "buildkit&quo ...

后端说，单页面SPA和前端路由是怎么回事