没有请求的路由

在传统开发中，浏览器点击一个超链接，就会像后端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 中使用附加属性解决 PasswordBox 的数据绑定问题
1.前言在 WPF 开发中 View 中的数据展示我们常通过 Binding 进行绑定.但是,使用 Binding 有一个前提:绑定的目标只能是依赖属性. 而 PasswordBox 控件中的 Pa ...
【C# 序列化】System.Text.Json.Nodes ---Json数据交换格式对应C#类
请先阅读 JSON数据交换格式 Json数据交换格式对应C#类 System.Text.Json.Nodes:.NET 6 依微软的计划,System.Text.Json 应取代Newtonsoft ...
Asp.NetCore3.1 asp.net 5.0 中多次读取 Request.Body Ajax Post过来的JSON数据等已验证有效
首先,以下方式是错误的(这个重复读取只能在using语句里面生效,因为用了ms对象赋值,当using结束后ms资源被释放,Request.Body就无法再读了) [HttpPost] public a ...
mysql存储地理信息的方法
MySQL 存储地理信息通常使用 GEOMETRY 数据类型或其子类型(如 POINT, LINESTRING, POLYGON 等).为了支持这些数据类型,MySQL 提供了 SPATIAL 索引, ...
pandas基础--汇总和计算描述统计
pandas含有是数据分析工作变得更快更简单的高级数据结构和操作工具,是基于numpy构建的. 本章节的代码引入pandas约定为:import pandas as pd,另外import numpy ...
react props-type
对于组件来说,props是外部传入的,无法保证组件使用者传入什么格式的数据,简单来说就是组件调用者可能不知道组件封装着需要什么样的数据,如果传入的数据不对,可能会导致程序异常,所以必须要对于props ...
dubbo~全局异常拦截器的使用与设计缺陷
异常拦截器ExceptionMapper 在JAX-RS(Java API for RESTful Web Services)中,ExceptionMapper接口用于将Java异常映射到HTTP响应 ...
Scrapy框架(六)--图片数据抓取
基于文件下载的管道类在scrapy中我们之前爬取的都是基于字符串类型的数据,那么要是基于图片数据的爬取,那又该如何呢? 其实在scrapy中已经为我们封装好了一个专门基于图片请求和持久化存储的管道类 ...
element table根据条件隐藏复选框
在<el-table>标签加 :cell-class-name="cellClass" 在 <el-table-column type="selecti ...
win10系统，磁盘出现惊叹号和一把锁符号如何关闭去掉
如标题描述,图标如下解决方法如下:搜索cmd -> 以管理员身份运行输入命令如下根据c,d,e盘符的文件量大小执行时间有些差异. manage-bde -off c:就可以解密c盘,成为b ...

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