没有请求的路由

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

随机推荐

SpringBoot使用@Value获取不到值的问题
背景在一次SpringBoot项目改造为Cloud的过程中,使用Nacos作为配置中心获取属性,改造后程序启动报错,查看日志,定位到代码: 解决方案如果了解Bean的生命周期的同学应该知道,Spr ...
NOIP模拟98(多校30)
T1 构造字符串解题思路不算特别难的题,但是有一点细节... 首先需要并茶几缩一下点,然后判断一下是否合法,由于我们需要字典序最小的,因此我们应当保证一个联通块中标号较小的点为根节点. 那么对于所 ...
python数据分析练习--分析成都的房价
目的:使用python的numpy.pandas.matplotlib库来分析成都二手房的房价信息. 原始数据来源:贝壳找房网站上的数据https://cd.ke.com/ershoufang 环境: ...
使用elementUI组件来完成前台展示
使用elementUI组件来完成前台展示,当然不是全部都用,有用到的时候,才用. 网址:https://element.eleme.cn/#/zh-CN 安装 cnpm i element-ui -S ...
《Android开发卷——HTTP网络通信,HTTP网络连接》
为了访问互联网,需要设置应用程序获取"androd.permission.INTERNET"权限的许可. 一.使用Apache接口(org.apache.http)并实现网络连接的 ...
doris wget 地址
wget https://apache-doris-releases.oss-accelerate.aliyuncs.com/apache-doris-2.0.0-alpha1-bin-x86_64. ...
Java跳动爱心代码
1.计算爱心曲线上的点的公式计算爱心曲线上的点的公式通常基于参数方程.以下是两种常见的参数方程表示方法,用于绘制爱心曲线: 1.1基于 (x, y) 坐标的参数方程 x = a * (2 * cos ...
iOS11之后刷新tableview会出现漂移的现象解决办法
首先要注意这只是在iOS11下会出现的bug,如果iOS10以及以下也有问题的情况不属于此列问题的动图如下所示,如果要做每隔一段短时间就刷新一个section甚至整个tableview的操作的时候会 ...
Mybatis、Mybatis Generator、Mybatis-Plus、Mybatis Plus Generator
1.介绍 Mybatis Mybatis 是操作数据库的框架:提供一种Mapper类,支持用Java代码对数据库进行增删改查. 缺点:需要先在xml中写好SQL语句: Mybatis Generato ...
.NET Core MVC基础之页面传值方式📃
.NET Core MVC基础之页面传值方式前言最近工作太忙了,浅浅更新一下.NET基础知识.大部分面试官都会问.NET页面传值的几种方式,那么接下来就来细讲与实现一下吧! 页面传值分成两类第一 ...

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