大话 SPA router
好吧,俺承认好像要当一把标题党了,这篇文章目的是记录一下对于 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 是怎么做的了。
<div id="app"><a class="route" path="a.html">首页</a><a class="route" path="b.html">详情页</a>
</div>
这是 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 支持一下,谢谢。
大话 SPA router相关推荐
- vue项目构建实战基础知识:SPA理解/RESTful接口介绍/static目录配置/axios封装/打包时map文件去除...
一.SPA 不是指水疗.是 single page web application 的缩写.中文翻译为 单页应用程序 或 单页Web应用,更多解释请自行搜索. 所有的前端人员都应该明白我们的页面的 u ...
- VUE解决微信签名,SPA微信invalid signature问题,完美处理
深度解决方案,包教不包会,只因为踩坑无数,希望大家能有所收获 前端小菜鸟,因为项目要对接微信的jssdk,对接就需要签名认证,但是无奈安卓和IOS各有各的坑,本篇文章只讨论签名,和一个分享的坑,希望大 ...
- 在像Angular2这样的SPA应用中使用Google Analytics的方法
Angular2のようなシングルページアプリケーションでGoogleアナリティクスを使う方法 如何在像Angular2这样的SPA应用中使用Google Analytics? 试着调查了一下. 由于S ...
- nuxt 如何引入js_nuxtjs如何在单独的js文件中引入store和router
nuxtjs里面集成vuex的创建方式改变了,并且官方不建议以导出Vuex实例的方式创建store,并且会在nuxt3里面删除.这样就会存在一个问题,我怎么像普通vue spa项目一样直接 impor ...
- Vue SPA 打包优化实践
本文是继笔者上一篇文章<<Vue SPA 首屏加载优化实践>>基础上进一步优化的实践经验分享! 随着我们的项目的增长,打包会越来越慢.每次打包都会将第三方的js打包一遍,但是这 ...
- Vue Router路由及路由重定向
Vue的核心深度集成,可以非常方便的用于SPA应用程序的开发. 实现路由功能七大步骤 第一步:引入相关的库文件 注意:必须先引用Vue,在引用vue-router 顺序不能颠倒 <!-- 导入 ...
- 从 React Router 谈谈路由的那些事
React Router 是专为 React 设计的路由解决方案,在使用 React 来开发 SPA (单页应用)项目时,都会需要路由功能,而 React Router 应该是目前使用率最高的. Re ...
- 四十三、在Vue使用router,路由的管理
@Author:Runsen @Date:2020/7/17 管理路由是一项必不可少的功能.今天,Runsen学习Vue Router. 文章目录 安装Vue Router Vue Router使用 ...
- angular路由笔记_Angular2学习笔记——路由器模型(Router)
Angular2以组件化的视角来看待web应用,使用Angular2开发的web应用,就是一棵组件树.组件大致分为两类:一类是如list.table这种通放之四海而皆准的通用组件,一类是专为业务开发的 ...
最新文章
- 前端见微知著JavaScript基础篇:你所不知道的apply, call 和 bind
- mysql 表空间收缩_【135期】谈谈MySQL中的重做日志,回滚日志,以及二进制日志的区别及各自作用...
- linux配置接口多地址,Linux /etc/network/interfaces配置接口方法
- Qt Creator将QML模块与插件一起使用
- jQuery学习笔记系列(二)
- eplan怎样创建和修改图框_EPLAN标题页及图框的设计
- 电商大促作战指南之全链路压测
- GoComb.com搜索引擎问世:改进搜索体验
- 菜鸟学Linux 第041篇笔记 常见系统故障排除
- AI笔记: 计算机视觉之图像边缘检测: Robert算子, Sobel算子, Laplace算子, LoG算子, Canny算子
- 概率空间probability space 伯努利实验 n次伯努利实验
- 压缩包文件密码如何解密
- Linux 挂载Samba 设置777权限及取消挂载
- CAP理论、AP架构、CP架构
- Flutter网络请求方式总结
- 基于kali2020环境,熟悉数据库服务的部署及基本验证方法及访问数据库
- 软件系统维护是一项不吸引人的工作_“京极接口大师——链接一切软件系统和设备【智能制造吧】...
- 你知道腾讯极光盒子与当贝盒子有什么区别吗?
- 亚马逊欧洲站现在做怎么样?
- 设计解析-封面/banner