SPA路由实现

最新推荐文章于 2022-10-12 22:37:14 发布
最新推荐文章于 2022-10-12 22:37:14 发布
阅读量222 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JunChow520/article/details/103030891
版权

需求：切换页面，异步加载JS，异步传参。

方式1：修改URL中的Hash

URL可带Hash标识不同页面，通过Window对象的onhashchange事件修改URL中的hash值。

http://www.hostname.com/index#page-home
http://www.hostname.com/index#page-profile
http://www.hostname.com/index#page-setting
http://www.hostname.com/index#page-news

window对象的onhashchange事件触发场景

  • 直接更改浏览器地址，在其后新增或修改#hash
  • 通过改变location.href或location.hash的值
  • 出发点击带hash锚点的链接
  • 浏览器前进后退导致hash变化，前提是网址中hash值不同。

方式2：修改H5的History

H5的history作为一种主流方法，因为hishtory是浏览器历史栈的一个接口，history对象中有back()、forward()、go()实现堆栈跳转。

H5提出pushState()和replaceState()方法，可向历史栈中添加数据，好像URL变化一样。在过去，只有URL变化history栈才会变化。使用H5的history可以很好的模拟浏览器前进后退。前端路由也是基于这个原理实现的。

pushState(obj, title, url)
  • 向history栈写入数据
  • obj 写入的数据对象，不大于640KB
  • title 页面标题
  • url 相对路径

使用注意

  • 当pushState执行一个浏览器的URL会发生改变页面不会刷新，只有当触发了前进后退等事件浏览器才会刷新。
  • URL受到同源策略限制，防止恶意脚本模仿站点URL来欺骗用户。所以当违背同源策略时会报错。
  • Firefox目前会忽略title参数化
replaceState(obj, title, url)

区别在于replaceState不是写入而是替换栈顶记录，其余和pushState一样。

History.length

静态只读属性，历史堆栈长度。

方式3：director.js 路由插件

JunChow520
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SPA简介及路由
weixin_60269711的博客
04-30 624
SPA 1. SPA是什么 单页Web应用（single page application，SPA），就是只有一个Web页面的应用， 是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序 单页面应用程序： 只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中 传统多页面应用程序： 对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面 优势 ...
详解SPA中前端路由基本原理与实现方式
10-18
具体实现SPA前端路由时，通常需要为不同的路由配置相应的处理函数。在使用如AngularJS、React、Vue等框架时，它们通常会提供相应的路由模块（例如AngularJS的ngRoute和ui-router，React的react-router，Vue的vue-...
SPA路由的基本实现
qq_42451776的博客
08-13 86
文章目录hash路由的实现history路由的实现 hash路由的实现 <body> <a href="#/home">home</a> <a href="#/login">login</a> <div class="content"> default </div> </body> <script> let el_content = docum
三分钟超级简单易上手的路由SPA实现思路~~
m0_67094505的博客
09-05 520
用于单页面Web应用（single page application，SPA），就是只有一个Web页面的应用，是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面对于以前 使用的jsp做页面的时候，一个页面会有很多个jsp组成，现在我们。
路由控制和视图转换框架 SPA
kaosini的专栏
02-12 1074
概述 SPA是为构建WebApp设计的路由控制和视图转换框架 SPA专注于解决构建WebApp时遇到的共性问题，尤其适用于构建MobileApp， 我们和jQuery Mobile、Sencha Touch等框架不同， 并不是一个构建移动端应用的前端整体解决方案，所以我们不包含UI组件，如果你不想自己设计界面， 可以用Bootstrap、Topcoat等UI Component
vue路由嵌套的SPA实现步骤
08-28
以下是一个关于如何在Vue中实现路由嵌套的SPA的详细步骤： 1. **创建父组件**： 首先，我们需要创建一个父组件A，它将作为嵌套组件B和C的容器。在A组件的模板中，通过`<router-view>`标签来指定一个区域，Vue ...
js实现自定义路由
10-20
知识点二：自定义路由实现 要实现自定义路由，我们首先需要创建一个router类。该类包含处理路由的核心逻辑，包括初始化、路由注册以及路由切换。 1. 初始化（init方法）：用于绑定hashchange事件到refresh方法，...
详解vue 单页应用（spa）前端路由实现原理
12-11
写在前面：通常 SPA 中前端路由有2种实现方式： window.history location.hash 下面就来介绍下这两种方式具体怎么实现的 一.history 1.history基本介绍 window.history 对象包含浏览器的历史，window.history ...
spa项目路由通用配置
huangpb的博客
08-08 276
1. 定义路由 import Vue from "vue"; import VueRouter from "vue-router"; Vue.use(VueRouter); const routes = [ { path: "/", component: () => import(/* webpackChunkName: "layout" */ "./layouts/BasicLayout"), beforeEnter: (to, from, next) =&gt.
SPA网络服务
02-16
SPA网络服务
vipspa.js jquery 用于局部路由，类似于vue route
05-21
用于局部路由，类似于vue route 大概使用方法： $(function(){ vipspa.start({ view: '#ui-view', //用于局部路由的div errorTemplateId: '#error', // 可选 router: { 'home': { templateUrl: 'views/home.html', controller: 'js/app/home.js', }, 'content': { templateUrl: 'views/content.html', controller: 'js/app/content.js' }, 'contact': { templateUrl: 'views/contact.html', controller: 'js/app/contact.js' }, 'user': { templateUrl: 'views/user.html', controller: 'js/app/user.js', subView: '#ui-sub-view', children: [ { name: 'login', templateUrl: 'views/login.html', controller: 'js/app/login.js', }, { name: 'regist', templateUrl: 'views/regist.html', controller: 'js/app/regist.js', } ] }, 'defaults': 'home' //默认路由 } }); });
vue全家桶之路由vue-router
weixin_45663264的博客
11-11 190
SPA （ single page App ） 单页面应用 多页面应用 有多个html文件，通过a标签的连接联通各个页面 缺点 开发起来太冗余，编译、压缩很耗时间 页面之间的跳转速度太慢，这个时候就会出现一个严重的问题，白屏 单页面应用 vue-router的优点 不需要刷新页面，因为它就是一个页面 这个页面内容在切换 单页面内容之间的切换要想实现我们就是用路由了 如今我们的app、后台管理系统 ...
SPA路由相关
luqingxuan
11-30 101
  https://github.com/browserstate/history.js   https://github.com/flatiron/director   https://github.com/visionmedia/page.js   https://github.com/tildeio/route-recognizer https://github.c...
SPA 中前端路由基本原理与实现方式
FareBlog
12-13 5495
通常 SPA 中前端路由有2中实现方式，本文会简单快速总结这两种方法及其实现： 修改 url 中 Hash 利用 H5 中的 history Hash我们都知道 url 中可以带有一个 hash， 比如下面 url 中的 page2https://www.abc.com/index.html#page2window 对象中有一个事件是 onhashchange，以下几种情况都会触发这个事件： 直接更
SPA单页路由词典
dylanqrr的博客
08-23 415
一、angular ng                                //容器 var app=angular.module('myApp',['ng','ngRoute']); app.config(function($routeProvider){ $routeProvider.when('/login',{template
使用 Vanilla JavaScript 构建自定义 SPA 路由器
allway2的博客
02-16 453
介绍 在本文中，我将解释如何使用 Vanilla JavaScript 构建自定义 SPA 路由器。我必须在没有任何使用框架的情况下构建一个 UI 项目，并且必须弄清楚如何处理路由，并发现您可以轻松地使用 Vanilla JavaScript 构建自己的路由器。 免责声明 我同意我们不应该重新发明轮子的哲学。随着 ReactJS、Vue 等框架的出现，它们中的每一个都有自己的自定义路由库，我建议您使用它们而不是构建一些基础的东西。但是，本文的目的是解释使用 VanillaJS 编写自定义路由器是可能的
history辅助下的SPA路由实现
songshuzhong的博客
04-25 809
      上篇文章简单介绍了html5的history api，这篇将就进入实战环节。看看在history api的辅助下，目前流行的前端SPA框架路由是怎么实现的。1.什么是SPA        首先，什么事spa呢？一句话概括：spa就是单页面应用，即：single page application。通过看源码就可以发现，整个网站就只有一个html文件。        那么，spa有什么优势...
对 SPA 应用的理解+路由的理解+路由的基本使用+路由的几个注意点
weixin_47075145的博客
10-12 651
1. 一个路由就是一组映射关系（key - value）2. key 为路径, value 可能是 function 或 component。
spa路由和hash路由的区别
最新发布
05-09
SPA（Single Page Application）路由和Hash路由都是前端路由的实现方式，但它们之间有一些区别。 SPA路由：SPA路由使用HTML5的history API，通过监听浏览器的历史记录，实现无刷新页面的前端路由。SPA路由的路径不带有#号，更加美观，且可以通过浏览器的前进和后退按钮进行导航。但是，SPA路由需要后端进行相应的配置，否则会在刷新页面时出现404错误。 Hash路由：Hash路由的路径带有#号，通过监听URL中的hash变化，实现无刷新页面的前端路由。Hash路由不需要后端进行额外的配置，可以直接在前端实现。但是，Hash路由不支持浏览器的前进和后退按钮导航，需要手动编写代码实现。 总之，SPA路由更加美观和实用，但需要后端配合，而Hash路由则更加简单易用，但部分功能受限。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值