没有请求的路由

在传统开发中，浏览器点击一个超链接，就会像后端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 ...

随机推荐

wpf 动画显示隐藏_[UWP]用Win2D和CompositionAPI实现文字的发光效果，并制作动画
weixin_39880899于 2020-12-11 09:26:23 发布阅读量521 收藏点赞数文章标签: wpf 动画显示隐藏 1. 成果献祭了周末的晚上,成功召唤出了上面的番茄钟 ...
RTOS官方文档学习
任务与协程区别一个程序可以只有任务.只有协程.二者都有,但不可以通过队列/信号量互相传递数据任务特点任务之间可以互相独立每个任务分配自己的堆栈,提高了RAM使用率操作简单.按优先级抢占式执 ...
Kafka--Rebalance重平衡
Rebalance总览 Rebalance触发条件 (1)消费组成员发生变更,有新消费者加入或者离开,或者有消费者崩溃 (2)消费者组订阅的主题数量发生变更 (3)消费组订阅主题的分区数发生变更避免 ...
categraf托管与自升级
categraf支持多种方式进行部署.托管,社区里部署和管理categraf也是五花八门,大家自己使用方便即可. 之前我们觉得大家通过ansible之类的工具批量下发/更新就能很简单地完成任务,最近很 ...
ssh基础
SSH安全登录机器准备什么是SSH SSH 或 Secure Shell 协议是一种远程管理协议,允许用户通过 Internet 访问.控制和修改其远程服务器. SSH 服务是作为未加密 Teln ...
CNN --入门MNIST识别
Smiling & Weeping ---- 下次你撑伞低头看水洼, 就会想起我说雨是神的烟花. 简介:主要是看刘二大人的视频讲解:https://www.bilibili.com/video ...
SHOW PROCESSLIST 最多能显示多长的 SQL？
在 MySQL 中,如果我们想查看实例当前正在执行的 SQL,常用的命令是SHOW PROCESSLIST. 但如果 SQL 过长的话,就会被截断.这时,我们一般会用SHOW FULL PROCESS ...
todo高通Android UEFI中的LCD分析（1）：启动流程分析
# 高通Android UEFI中的LCD分析(1):启动流程背景之前学习的lk阶段点亮LCD的流程算是比较经典,但是高通已经推出了很多种基于UEFI方案的启动架构. 所以需要对这块比较新的技术进 ...
python基础-列表list [ ]
列表的定义和操作列表的特性: 元素数量支持多个元素类型任意下标索引支持重复元素支持可修改性支持数据有序是使用场景可修改.可重复的一批数据记录场景 # 定义一个列表list ...
webdav协议及我的笔记方案（私有部署）
背景用markdown用于文章写作,有几年时间了,不是很喜欢折腾,主要就是在电脑上写,用的笔记软件就是typora.由于里面有很多工作相关的,以及个人资料相关的(包含了各种账号.密码啥的),所以不敢 ...

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