SPA 路由记忆

starsfun 发布于2019-08-26 11:33 / 2711人阅读

摘要：路由记忆名词解释在中后台系统开发中，访问任何页面时，认证是永远绕不过的槛。这个过程，暂且称之为路由记忆，前面例子中的登录页面称之为记忆节点。

SPA 路由记忆 名词解释

在中后台系统开发中，访问任何页面时，认证是永远绕不过的槛。以登录为例，如果检测出当前用户未登录，会强制跳转到登录页面提示用户进行登录。登录完成后，系统需要跳转至用户原先想访问的页面。这个过程，暂且称之为路由记忆，前面例子中的登录页面称之为记忆节点。

解决方案

由前面的例子我们不难得出路由记忆的关键逻辑：

进入记忆节点时记录目标页面

离开记忆节点时跳往目标页面（如果存在）

// 目标页面
const target = undefined;

但如此只能满足存在一个记忆节点的应用，而实际开发中，我们可能需要多个记忆节点。当应用中存在多个记忆节点时，问题就会慢慢的浮现。

接下来，我们对上面的方案进行扩展。

记忆节点集合

首先，我们需要维护一个记忆节点的集合：

// 记忆节点集合
const nodes = [];

上次访问记录

在这之前我们得先思考一个问题：由记忆节点跳往记忆节点时，是否需要触发路由记忆？

当然不需要！！！

当进入记忆节点时，我们首先得判断上一个访问页面是否为记忆节点，是则忽略，否则记录目标页面。

在这之前，我们需要定义一个变量用来记录上次访问页面，这个变量仅记录上次访问页面即可，无论是否为记忆节点：

// 上次访问页面
const previous = undefined;

记录目标页面

为保证路由记忆结果的质量，我们需要对每次路由跳转结束进行监控（不论成功、取消或者失败）。

结合前面的例子，我们现在不难得出，只有在常规页面进入记忆节点时，需要对目标页面进行记录。

/**
 * @param to {string} 去往页面
 */
function mark (to) {
    // 备份上次访问页面，防止被覆写
    const backup = previous;
    // 记录上次访问页面
    previous = to;
    // 如果上一个访问页面是记忆节点，中断函数
    if (~nodes.indexOf(backup)) return;
    // 如果去往页面不是记忆节点，中断函数
    if (!~nodes.indexOf(to)) return;
    // 记录目标页面
    target = backup;
}

跳往目标页面

在每次路由跳转之前，我们需要检测是否是记忆节点进入常规页面且是否存在目标页面记录，如果条件都满足，则打断原有操作跳往目标页面，并清空目标页面记录。

/**
 * @param to {string} 去往页面
 */
function check (to) {
    // 若目标页面不存在，中断函数
    if (!target) return;
    // 备份目标页面，防止在使用之前被清空
    const backup = target;
    // 如果去往页面是记忆节点，中断函数
    if (~nodes.indexOf(to)) return;
    // 如果上次访问不是记忆节点，中断函数
    if (!~nodes.indexOf(previous)) return;
    // 清空目标记录
    target = undefined;
    // 路由跳转，假定执行函数为 navigate
    navigate(target);
}

代码整合 ES5

var RouterMemory = function (nodes) {
    // 目标页面
    this.target = undefined;
    // 上次访问页面
    this.previous = undefined;
    // 记忆节点集合
    this.nodes = nodes && nodes instanceof Array ? nodes : [];
}

/**
 * 记录上次访问及目标页面
 * @param to {string} 去往页面
 */
RouterMemory.prototype.mark = function (to) {
    // 备份上次访问页面，防止被覆写
    var backup = this.previous;
    // 记录上次访问页面
    this.previous = to;
    // 如果上一个访问页面是记忆节点，中断函数
    if (~nodes.indexOf(backup)) return;
    // 如果去往页面不是记忆节点，中断函数
    if (!~nodes.indexOf(to)) return;
    // 记录目标页面
    this.target = backup;
}

/**
 * 跳往目标页面
 * @param to {string} 去往页面
 */
RouterMemory.prototype.check = function (to) {
    // 若目标页面不存在，中断函数
    if (!this.target) return;
    // 备份目标页面，防止在使用之前被清空
    const backup = this.target;
    // 如果去往页面是记忆节点，中断函数
    if (~nodes.indexOf(to)) return;
    // 如果上次访问不是记忆节点，中断函数
    if (!~nodes.indexOf(this.previous)) return;
    // 清空目标页面
    this.target = undefined;
    // 路由跳转，假定执行函数为 navigate
    navigate(this.target);
}

ES Next

class RouterMemory {
    constructor (nodes) {
        // 目标页面
        this.target = undefined;
        // 上次访问页面
        this.previous = undefined;
        // 记忆节点集合
        this.nodes = nodes && nodes instanceof Array ? nodes : [];
    }
    /**
    * @param to {string} 去往页面
    */
    mark (to) {
        // 备份上次访问页面，防止被覆写
        const backup = this.previous;
        // 记录上次访问页面
        this.previous = to;
        // 如果上一个访问页面是记忆节点，中断函数
        if (nodes.includes(backup)) return;
        // 如果去往页面不是记忆节点，中断函数
        if (!nodes.includes(to)) return;
        // 记录目标页面
        this.target = backup;
    }
    /**
    * @param to {string} 去往页面
    */
    check (to) {
        // 若目标页面不存在，中断函数
        if (!this.target) return;
        // 备份目标页面，防止在使用之前被清空
        const backup = this.target;
        // 如果去往页面是记忆节点，中断函数
        if (nodes.includes(to)) return;
        // 如果上次访问不是记忆节点，中断函数
        if (!nodes.includes(this.previous)) return;
        // 清空目标记录
        this.target = undefined;
        // 路由跳转，假定执行函数为 navigate
        navigate(this.target);
    }
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107108.html

react 项目构建

摘要：配置方式找到文件如需添加路由则在里面添加，同时需要后端更改配置除了上面的路径，其他路径全部指向单页应用多路由预渲染指南使用说明源码为方便快速构建项目，本例所有配置的代码均放在项目中。写在前面每次构建react项目的时候都会配置一大堆东西，时间久了就会忘记怎么配置。为了方便自己记忆也为了其他开发者在构建react应用时能够快速开发，故作此记录。本项目基于 create-react-...

ACb0y 2019-08-23 11:54 评论0 收藏0
Router入门0x201: 从 URL 到 SPA

摘要：的全称是统一资源定位符英文，可以这么说，是一种标准，而网址则是符合标准的一种实现而已。渲染器，将组件渲染到页面上。 0x000 概述从这一章开始就进入路由章节了，并不直接从如何使用react-route来讲，而是从路由的概念和实现来讲，达到知道路由的本质，而不是只知道如何使用react-route库的目的，毕竟react-route只是一个库，是路由的一个实现而已，而不是路由本身。 ...

honmaple 2019-08-26 12:20 评论0 收藏0
前端prerender-spa-plugin预渲染

摘要：预渲染构建阶段生成匹配预渲染路径的文件注意每个需要预渲染的路由都有一个对应的。使用安装中引入代码打包目录模板页面要预渲染的页面路由默认挂在对象上，可以通过在预渲染页面取值渲染时显示浏览器窗口。 prerender-spa-plugin预渲染：构建阶段生成匹配预渲染路径的 html 文件（注意：每个需要预渲染的路由都有一个对应的html）。构建出来的 html 文件已有部分内容。 pre...

godiscoder 2019-08-23 15:16 评论0 收藏0
[译]如何基于Laravel构建Vue应用（一）

摘要：使用能优雅的构建并且与单页面应用程序完美结合。我们将重点关注所需的所有部分，然后在后续教程中，我们将进一步演示如何使用作为层。例如，如果用户刷新路由，我们将需要匹配该路由并返回应用程序模板。运行应用程序该基础用于构建具有和路由器的。使用Laravel能优雅的构建API并且与Vue单页面应用程序（SPA）完美结合。在本教程中，我们将展示如何启动和运行Vue路由器以及用于构建SPA的La...

Rocko 2019-07-01 12:42 评论0 收藏0
SPA那点事

摘要：单页面应用的出现依然存在着争议性，我们该如何看待他的两面性呢接下来小生给大家总结一下他的优缺点。单页面应用的优势无刷新体验没有了令人诟病的页面频繁刷新，同时节约浏览器资源，路由响应比较及时，提升了用户的体验。前端猿一天不学习就没饭吃了，后端猿三天不学习仍旧有白米饭摆于桌前。IT行业的快速发展一直在推动着前端技术栈在不断地更新换代，前端的发展成了互联网时代的一个缩影。而单页面应用的发展...

PumpkinDylan 2019-08-01 17:39 评论0 收藏0