美文网首页Ajax
单页面应用路由

单页面应用路由

作者: 冷小谦 | 来源:发表于2019-01-21 10:07 被阅读48次

最初的网页是一个个独立的html页面,通过a标签从页面跳转到另一个页面。但是同一个页面会有很多相同的部分。相同的部分无论是静态的还是动态语言程序生成都会浪费一定带宽。

后来通过ajax,用户交互不会再刷新整个页面,单页面应用也就初具雏形。

由于页面中大部分元素是ajax请求后渲染出来的,但由于ajax请求不会改变地址栏,无法保持页面的状态。用户不能把页面的某个状态以url的方式分享给其他人。要重新打开页面重新查找或者请求。

所以需要路由,把页面的状态保存在url中。

前端路由有两种实现方式,一种是H5提出的historyapi,另一种是hash路由。

以往后台路由直接改页面的url使页面刷新。但是前端路由通过#号不能刷新页面,只能通过window的监听事件hashchange来监听hash的变化。我们知道window.location可以操作地址栏修改url,但是修改了Location就会向服务器发送请求并发生页面跳转。但是hash属性修改后不会发生页面跳转

history.push新路由

H5标准中,为History添加了两个新方法pushState和replaceState。
pushState可以让url改变但不会导致浏览器跳转。即改变地址栏并创建一条新的浏览历史记录但不发送网络请求

相关文章

  • 页面路由(模拟页面跳转)

    路由用于单页面应用的模拟跳转

  • 6 VUE路由

    vue-> SPA应用,单页面应用(引入vue-router.js) 路由嵌套(多层路由): 路由其他信息:

  • Vue、React前端项目打包部署

    前端单页面应用部署 前端打包上线部署方案之 hash路由模式 对于hash路由模式打包的单页面应用,直接发布到服务...

  • vue路由

    vue路由--- SPA应用,单页面应用vue-resouce 交互vue-router 路由根据不同url地址...

  • Router 原理及 React-Router

    页面路由(浏览器路由) 页面会刷新 hash路由 页面不会刷新,之前做单页应用,使用的传统方法。 h5 路由 h5...

  • 单页面应用路由

    最初的网页是一个个独立的html页面,通过a标签从页面跳转到另一个页面。但是同一个页面会有很多相同的部分。相同的部...

  • React路由配置

    目前前端项目都是SPA项目,而单页应用就少不了路由配置,因为单页应用的页面不会刷新页面,而是根据路由的切换来更换页...

  • vue-router

    路由 路由是单页应用的路径管理器,单页应用相当于只有一个index.html页面,改变路径可切换至不同的页面 安装...

  • 微信公众号底部自定义菜单栏链接在spa项目上的分享问题

    问题如图: 出现在vue,angular, react等单页面应用项目上,单页面应用路由用的hash, 而分享时微...

  • 10 Vue路由、http请求、跨域请求fetch/axios/

    1、Vue路由的使用 ->页面之间跳转其不会刷新页面 ->单页面应用 ->用户体验感良好 (1).安装路由模块:n...

网友评论

    本文标题:单页面应用路由

    本文链接:https://www.haomeiwen.com/subject/jwrzdqtx.html