首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

SPA页面初试

之前一直很好奇,SPA应用到底是怎么实现的,昨天无意间看到了有一篇介绍的文章,就想着来试一下水(以下根据我的理解所写,可能会让你看的云里雾里,如果想加深了解,最好先了解下window.location.hash...是什么东西) 其实,SPA的原理就是,一开始将一些必要的页面都加载进来,当你在页面输入别的路由的时候,其实还是待在当前的页面,只不过是他识别出你想要去的地址,然后将那个页面的内容获取到,替代掉当前页面的内容...说了这么多,我们来根据他的原理做一个SPA的小应用吧(里面的html和css代码直接复制了我之前看的那个博客的作者的,因为懒得自己设计) html代码如下: 的两个display设置为node,这样我们一开始进去就只能看到main-view这个页面 之后,我们可以通过js代码来模拟SPA对路由跳转的处理 var states ; var currentState...修改路由地址,修改为file:///C:/Users/chenjg/Desktop/Interest/SPA/index.html#list-view,可以看到页面发送了相应的变化 ?

99520
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    SPA(单页面应用)的基本实现原理

    写在前面 我们应该都使用过网易云音乐或者是别的一些逼格比较高的网页,他们比较厉害的一点是页面看起来只有一个,不管你点击什么地方,永远不会刷新页面,都是感觉是在一个页面上完成的操作,这个逼格那么高的页面是怎么实现的呢...源码已经上传到Github上:spa应用的简单实现 我们首先看一下效果: ? 那么之前我说过,遇到一个问题怎么办?...首先分析一下问题包括几个部分,这里可以看到,想实现这样效果,有两个前提,第一是页面不可以刷新,第二个是怎么可以获取到URL中#(锚部分)后面的东西,如果可以控制#后面的值那么我们就可以用它来写文章。...OK,问题定位到了以后,下面就是怎么解决的问题,首先我们都知道,不刷新页面其实很简单,就是使用ajax就可以了,ajax的异步请求是完全可以满足我们第一个问题的解决方案的,第二个怎么做呢?...其实呢也简单,我们都知道页面的location对象,他有很多自己的属性: ? 我们可以看到第一个hash不正是我们要找的吗? 解决方案有了,下面就是编码了,怎么实现呢?看代码: ?

    1.1K20

    单页面应用(SPA)和多页面应用(MPA)区别

    只要前后端对接好要开发的接口json数据,基本上就不会影响两端的问题。     单页面应用(SPA),只有一个主页面的应用,浏览器一开始要加载所有必须的 html, js, css。...所有的页面内容都包含在这个所谓的主页面中。但在写的时候,还是会分开写(页面片段),然后在交互的时候由路由程序动态载入,单页面的页面跳转,仅刷新局部资源。...多页面(MPA),就是指一个应用中有多个页面,页面跳转时是整页刷新,大多数前后端合在一起的框架使用的是多页面 二.区别 单页面应用(SPA) 概念:只有一个html页面,所以跳转的方式是组件之间的切换...内容的改变不需要重新加载整个页面,基于这一点spa对服务器压力较小,以前后端做的事情,现在前端可以做     2,前后端分离,前台只需要关心前台,后端只需要关心后台     3,页面效果会比较炫酷(比如切换页面内容时的专场动画...多页面应用(MPA) 概念:有多个完整页面构成,跳转方式是页面之间的跳转,例如超链接或者后台控制返回视图之类的。

    3.1K30

    彻底理清前端单页面应用(SPA)的实现原理

    这里并不是说多页面应用不好,只能说各有各自的好,单页面应用如果通过大量的极致优化手段,是可以从不少方面跟原生一拼。 ?...目前的单页面应用: 只有一张Web页面的应用,是一种从Web服务器加载的富客户端,单页面跳转仅刷新局部资源 ,公共资源(js、css等)仅需加载一次,常用于PC端官网、购物等网站 其实只有一个空的DIV...,其实最终结果就是: 浏览器的url地址发生变化,但是其实并没有发送请求,也没有刷新整个页面 根据我们配置的路由信息,每次点击切换路由,会切换到不同的组件显示,类似于选项卡功能的实现,但是同时url地址栏会变化...init 用来初始化路由,在 load 事件发生后刷新页面,并且绑定 hashchange 事件,当 hash 值改变时触发对应回调函数 开始使用: ...History模式下,刷新页面会404,需要后端配合匹配一个任意路由,重定向到首页,特别是加上Nginx反向代理服务器的时候 我们需要换个思路,我们可以罗列出所有可能触发 history 改变的情况,并且将这些方式一一进行拦截

    3.2K41

    单页面Web应用(SPA应用)SEO优化

    单页Web应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。...它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了,SPA不会因为用户的操作而进行页面的重新加载或跳转。...取而代之的是利用 JavaScript 动态的变换HTML的内容,从而实现UI与用户的交互。由于避免了页面的重新加载,SPA 可以提供较为流畅的用户体验。...得益于ajax,我们可以实现无跳转刷新,又多亏了浏览器的histroy机制,我们用hash的变化从而可以实现推动界面变化。 SPA被人追捧是有道理的,但是它也有不足之处。...当然任何东西都有两面性,以下是卤煮总结的一些目前SPA的优缺点:优点无刷新界面,给用户体验原生的应用感觉。缺点不利于搜索引擎抓取。 SEO到底指的是什么意思?

    1.4K10

    Vuex页面刷新的数据丢失问题

    Vuex页面刷新的数据丢失问题 1、问题描述 2、解决方案:使用sessionStorage   在实际项目中,经常会遇到多个组件需要访问同一个数据的情况,且都需要根据数据的变化作出响应,而这些组件之间可能并不是父子组件这种简单的关系...1、问题描述 Vuex用起来确实很舒服,但是今天碰到了个问题,就是我将JWT和一些权限字符串使用store保存的时候,刷新页面之后这些值就没了,由于我后端集成了SpringSecurity,所以每次请求我都会去验证...JWT,如果刷新页面的话,后续请求头中就没有token,就会导致报错。   ...如下图:   刷新页面之后: 2、解决方案:使用sessionStorage   我们将state的数据保存在localStorage/sessionStorage/Cookie中,这里以sessionStorage...此时再刷新页面:   可以看到,数据仍然在,问题解决。

    1.8K30

    html如何只刷新页面指定,js控制页面刷新 JS刷新当前页面的几种方法总结

    JS页面 如何实现刷新指定DIV。。。 其他DIV不刷新 将innerHTML所在的方法用一个单独的函数写出来,然后需要时再调用。...js实现进入页面先刷新在继续进行js的功能 js实现,进入页面先刷新一下,然后在执行之后js代码需要完成的工作 js或者jquery实现固定时间刷新页面 js怎么写2秒后再刷新当前页面 设置定时2秒后执行刷新...setTimeout(function(){ //使用 setTimeout()方法设定定时2000毫秒window.location.reload();//页面刷新},2000); 如何让html页面实现每次刷新的时候重新执行...true, 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5(“刷新”) replace 用js操作 怎样 实现刷新当前页面 而 不改变请CSS布局HTML小编今天和大家分享头按F5...可以 就是不知道用js 或jquery怎样实现的F5功能 或者有其他方法实现 js刷心当前页面,你说的不闪应该是所有页面不会有变白的一瞬间,那就根据需要对页面某一块区域用AJAX处理,刷新的时候就只会改变

    13.8K30

    Vue刷新当前页面

    问题 最近些日子项目中突然碰到了一个需求,再完成编辑操作之后需要进行页面刷新,通过实验有如下几种姿势可以解决需求中的问题,下面进行简单总结如下。 姿势一:this....$router.go(0) 这个姿势是利用了 history 中前进和后退的功能,传入 0 刷新当前页面。但是有一个问题就是页面整个刷新过程中会白屏,严重影响用户的体验感,效果不好。 this....但是同样存在有一个问题就是页面整个刷新过程中会白屏,严重影响用户的体验感,效果也是不好,和姿势一的现象一直,也不推荐使用。...先把 移除,移除后再重新添加,达到刷新当前页面的功能。是目前最合适的实现方式。...this.reload()// 需要刷新页面

    2.8K60
    领券