大话 SPA router

wayneli 发布于2019-08-22 14:50 / 3478人阅读

摘要：而单页应用只提供一个文件，在页面初始化的时候加载等等，然后通过去动态更新视图，从而实现交互，这避免了页面的刷新，跳转等等。这个方法是用来更换历史记录的。获取当前历史栈栈顶数据。比如说在这里面可以通过路径的不同，然后去渲染不同的页面。

好吧，俺承认好像要当一把标题党了，这篇文章目的是记录一下对于 spa 的核心 —— 路由的学习，并没有什么超人类的东西，好了，我们开始吧。

SPA 是个啥？

相信还是有不少的萌新是不知道 SPA 是个啥？是不是想问一句，你是谁？你是不是搞美容的那个 SPA。其实并不是，SPA 在前端领域可不是美容的，它是单页应用的意思，那么啥是单页应用呢？在这个时代如果不知道这个名词的多半是萌新了,我们也简单的聊一聊这个东西。

以前我们开发应用的时候，会写多个页面，比如说首页、详情等等，我们通过点击页面的 a 标签，然后去获取另一个页面，重新加载，或者跳转。而单页应用只提供一个 HTML 文件，在页面初始化的时候加载 js、css 等等，然后通过 js 去动态更新视图，从而实现交互，这避免了页面的刷新，跳转等等。

So，单页应用的优点是啥呢？

前后端分离，提升开发效率

减轻服务器压力，前端完成很大一部分逻辑

提升用户体验，如丝般润滑啊

技术核心

其实谈到 SPA，我们实现的方法大概就有 hash 和 H5 的 History 两种，我们来了解下。

History API

在 HTML5 中，我们可以发现 History 多出了几个 API，我们来一起走一遍：

history.pushState( data, title[, url] ): 顾名思义，往历史记录栈栈顶添加一条数据，data 会作为触发 popstate 事件的时候的参数，titile 为标题，url 为页面地址。

history.replaceState( data, title[, url] ): 这个方法是用来更换历史记录的。

history.state: 获取当前历史栈栈顶数据。

event -> popstate: 当用户点击浏览器回退或者前进按钮就会触发 popstate 事件。

我们来搞一个简单的例子，就知道 history 是怎么做的了。


  首页
  详情页

这是 html 文件，下面就是 js 文件了：

const routes = document.querySelectorAll(".route");
routes.forEach(route => {
    route.addEventListener("click", e => {
        e.preventDefault();
        // 在这里面，我们也是可以通过参数的不同，然后渲染不同的页面。
        const path = route.getAttribute("path");
        window.history.pushState({ public: "data" }, null, path);
    }, false);
});

window.addEventListener("popstate", e => {
    // 比如说在这里面可以通过路径的不同，然后去渲染不同的页面。
}, false);

我们首先是通过点击，然后将 data、url 等参数 push 到栈里面，然后渲染页面，如果说我们通过浏览器的回退或者前进，就会触发 popstate，然后通过不同路径进行页面渲染，其实 history 就是这么一个基本原理。

Hash

这种方案就是去监听 hash 的变化，然后去做相应的操作，其实非常简单，我们需要用到 location.hash 和 hashchange 这个事件就好了，很简单，和上面的操作差不多这里就不说了。

如果各位看官看的还行，可以到 GitHub 里给我一颗小小的 star 支持一下，谢谢。

云服务器 GPU云服务器 spa single-spa Router Vue Router

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

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

大话React-Redux

摘要：一组件将所有组件分成两大类组件和容器组件。前者负责与外部的通信，将数据传给后者，由后者渲染出视图。也就是说，用户负责视觉层，状态管理则是全部交给它。前者需要从计算得到，后者需要向外发出。最后，生成对象，并使用在根组件外面包一层。一、UI 组件 React-Redux 将所有组件分成两大类：UI 组件（presentational component）和容器组件（container c...

huangjinnan 2019-08-26 13:49 评论0 收藏0
利用vue-cli配合vue-router搭建一个完整的spa流程（二）

摘要：利用配合搭建一个完整的流程一在一中写到了主要页面的编写，现在开始三个路由页面的编写。每个列表绑定跳转到详情页的函数。整体思想通过监控的变化，变化后执行函数，随后重新获取数据。上篇文章太长了，编写时拖动太麻烦，重开一篇。利用vue-cli配合vue-router搭建一个完整的spa流程（一）在（一）中写到了主要页面的编写，现在开始三个路由页面的编写。第一步：路由实例inde...

mcterry 2019-08-20 16:05 评论0 收藏0
vue 2 + vue-router 2 实现SPA

摘要：标签是展示我们匹配到的组件的区域。其中可以是通过创建的组件构造器，或者，只是一个组件配置对象。缩写相当于创建和挂载根实例。创建实例及配置，即。参考文献官方文档学习笔记构建单页应用最佳实战一个完整的应用起手 github项目地址请点这里。使用 Vue.js 时，我们就已经把组件组合成一个应用了，当我们要把 vue-router 加进来，只需要配置组件和路由映射，然后告诉 vue-rou...

OBKoro1 2019-08-20 13:38 评论0 收藏0
[译]如何基于Laravel构建Vue应用（一）

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

Rocko 2019-07-01 12:42 评论0 收藏0
利用vue-cli配合vue-router搭建一个完整的spa流程（一）

摘要：利用配合搭建一个完整的流程二前言所用的一些基本操作。全局安装创建一个基于的模板创建过程中，为必须，其他语法检测，单元测试等按需求安装。为入口文件，的实例在这里书写。挂载在中的标签上。定时器的作用是模拟数据请求延时。 2017/5/9 更新！GitHubpages搞了下，PC可以浏览。↓ https://15901233752.github.io... showImg(https://...

cgh1999520 2019-08-20 16:01 评论0 收藏0