单页面应用路由的实现方式
来源:互联网 发布:java定时器讲解 编辑:程序博客网 时间:2024/04/26 12:06
好久不曾写博客了,九月以来一直忙着笔试面试,都已经两旬过去了,如今还是两手空空,再怎么受挫,再怎么不如意,该走的路一步都不能少,今天就来总结下面试时被问:到单页面应用的路由是如何实现的?
如今前端框架层出不穷,手机端单页面应用越来越多的出现在人们的视野中,作为前端开发者,掌握一两中主流框架是很有必要的,了解ajax的都知道ajax异步刷新页面是不会存在历史记录中的,也就是我们不能通过浏览器的前进和后退按钮来跳转页面,但是聪明的猿们怎么会没有办法呢?猿们通过location.hash+hashchange
来实现,也可以通过history.pushState+popstate
来实现。下面看一下两种方法如何来使用。
一 . location.hash+hashchange
原理:
location.hash
获得的是浏览器地址栏url的散列部分,也就是/
后面的内容,我们可以通过改变location.hash
的值,来改变地址栏的url地址,一旦地址栏的url改变,就会触发hashchange
事件,我们可以在该事件中添加回调函数,从而来刷新页面的内容。
具体看下面的代码:
function Router (){ this.routers = {}; this.currentUrl = ''; } Router.prototype.toRouter = function (path, callback){ this.routers[path] = callback; } Router.prototype.refresh = function (){ this.currentUrl = location.hash.slice(1) || '/'; this.routers[this.currentUrl](); } Router.prototype.init = function (){ window.addEventListener('load', this.refresh.bind(this), false); //监听url改变的事件,触发回调函数 window.addEventListener('hashchange', this.refresh.bind(this), false); } var router = new Router(); router.init(); function changecolor(color){ var body = document.getElementsByTagName('body')[0]; body.style.backgroundColor = color; } //为每个url添加回调函数,来刷新页面 router.toRouter('/',changecolor.bind(null,'skyblue')); router.toRouter('/blue',changecolor.bind(null,'blue')); router.toRouter('/green',changecolor.bind(null,'green'));
二 . history.pushState +popstate
先说一下pushState
方法的参数,history.pushState(state, title, url)
。该方法有三个参数,第一个state是一个json对象,在触发popstate
事件是很有用;第二个是一个字符串,目前大多数浏览器忽略该参数,所以一般传值为null就可以了;第三个参数是url地址,也是一个字符串。
原理:点击页面的url或者在地址栏输出url,将该url和定义好的state对象加入浏览器历史记录中,此时导航栏的地址就为当前新加入的地址,只要点击浏览器的前进后退按钮,就会触发popstate事件,就可以执行事件绑定的方法来更新页面,从而达到回退前进的效果。
代码:
history.pushState({ name: 'red', url: '/red', title: '红色页面' }, null, '/red'); history.pushState({ name: 'green', url: '/green', title: '绿色页面' }, null, '/green'); window.addEventListener('popstate', function (e) { //伪函数,只是模仿事件响应之后的操作 ajax(e.state.url, callback); }, false);
还有一个history.replaceState
,只是替换当前的url,不会加入历史记录中。
以上这两种方式就是单页面应用如何实现路由刷新的方式,很惭愧,学习前端这么久了,才知道这两种方法,希望可以对正在学习的大家有所帮助。
- 单页面应用路由的实现方式
- JS原生一步步实现前端路由和单页面应用
- JS单页面应用实现前端路由(hash)
- ng中的路由和单页面应用
- Angular路由实现单页面切换
- Angular路由实现单页面切换
- AngularJs route ng路由 单页面应用(上)
- AngularJs route ng路由 单页面应用(下)
- angular ui-router:简单的单页面嵌套路由的实现过程
- 单臂路由应用的例子
- SPA(单页面应用)的简单实现
- AJAX 单页面应用的两种实现思路
- 使用 AngularJS 的路由和模板实现单页应用 (Single Page)
- 使用 AngularJS 的路由和模板实现单页应用 (Single Page)
- 使用 AngularJS 的路由和模板实现单页应用 (Single Page)
- 单页面应用的核心
- angularjs_路由单页面跳转
- Vue笔记3 vue-cli单页面应用与路由设置
- 栈及其初级应用
- 第一篇博客 & 暗时间读后感
- eclipse汉化教程eclipse中文语言包
- 威力导演(Powerdirector)16中文免费版下载附安装教程
- JQury实现二级联动和<select>分类选择移动
- 单页面应用路由的实现方式
- 18. 4Sum(求数组中和为指定值的4个数)
- go get 获得 golang.org 的项目
- 视觉常用数据集介绍和图像的常见操作
- 利用Apache实现图片服务器的分离
- 线程的5种状态
- 3.定义一个接受两个数字的方法,返回两个数字的和 →(javascript代返回值的函数的申明和调用)
- VS2017安装过程电脑突然关机
- 文章标题