前端路由笔记

た入场券 2022-03-06 06:48 310阅读 0赞

前端路由的实现本质：检测URL变化，获取url地址，解析url匹配页面；  
检测URL变化有两种方式： hash，HTML5 History

1.  HTML5 History  
    history.pushState 和 history.replaceState这两个api都分别接收三个参数：状态对象，标题， ***url***(此url地址不支持跨域，跨域会报错)  
    这两个API都会操作浏览器的历史记录，并不引起浏览器的刷新，pushState会增加一条新的历史记录，replaceState会替换当前的历史记录；  
    popstate事件，需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件。只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮，或者在Javascript代码中调用3.back()。  
    原理在点击某个路由时执行pushState，在操作浏览器时执行popstate；
2.  hash location.hash  
    window.location修改hash至不会引起页面刷新，而是当作新页面加到历史记录中。hash值变化会触发hashchange事件。

Function Router(){
        this.currentUrl = '';
        this.routes = {};
    }
    
    Router.prototype.route = function(url, callback){
        this.routes[url] = callback || function(){}
    }
    
    Router.prototype.refresh = function(){
        this.currentUrl = location.hash.slice(1) || '/';
        this.routes[this.currentUrl]();
    }
    
    Router.prototype.init = function(){
        window.addEventListener('load', this.refresh.bind(this), false);
        window.addEventListener('hashchange', this.refresh.bind(this), false);
    }
    //使用
    var $target = $('#target');
    var route = new Router();
    route.init();
    route.route('/', $target.html('this is index page!!') );
    route.route('/page1', $target.html('this is page1!!'));

发表评论取消回复

表情：

评论列表（有 0 条评论，310人围观）

还没有评论，来说两句吧...

相关阅读

相关 [开发|前端] 路由守卫笔记

描述 vue-router提供的导航跳转或取消的api。 router.beforeEach 切换路由前调用 router.beforeResolve 组件内路由守卫

墨蓝/ 2024年03月23日 22:19/ 0 赞/ 45 阅读

相关前端路由原理

前言前端三大框架 `Angular`、`React`、`Vue` ，它们的路由解决方案 `angular/router`、`react-router`、`vue-rou

痛定思痛。/ 2023年01月23日 10:46/ 0 赞/ 8 阅读

相关 Vue Router前端路由

感受前端路由 1、简介 2、HTML页面使用路由 1、简介传统的Web应用程序不同页面间的跳转都是向服务器发起请求，服务器处理请求后向浏览器推送页面

野性酷女/ 2022年08月31日 07:15/ 0 赞/ 203 阅读

相关 Vue前端路由

Vue前端路由 Vue Router vue-router的基本使用引入相关的库文件添加路由链接添加路由填充位

男娘i/ 2022年08月29日 00:02/ 0 赞/ 256 阅读

相关前端路由与后端路由

后端路由意味着浏览器刷新页面。显然很多 webapp 的需求上是不希望这样的体验的。网速慢的话说不定屏幕全白再有新内容。前端路由就不会有这样的问题了。随意控制，逻辑也可

旧城等待，/ 2022年07月16日 03:39/ 0 赞/ 243 阅读

相关前端路由与后端路由

说起前端框架，我个人主张有框架不如无框架，这个观点要先从框架和库的区别说起。　　我所理解的库，解决的是代码或是模块级别的复用或者对复杂度的封装问题;而框架，更多的是对模式级

谁借莪１个温暖的怀抱￠/ 2022年06月14日 04:27/ 0 赞/ 237 阅读

相关前端路由与后端路由

后端路由意味着浏览器刷新页面。显然很多 webapp 的需求上是不希望这样的体验的。网速慢的话说不定屏幕全白再有新内容。前端路由就不会有这样的问题了。随意控制，逻辑也可

叁歲伎倆/ 2022年06月14日 04:26/ 0 赞/ 254 阅读

相关什么是前端路由

前端路由在很多开源的js类库框架中都得到支持，如angularJS，Backbone，Reactjs等等。这篇文章主要和大家谈谈什么是前端路由，以及它的使用场景及优缺点 1

心已赠人/ 2022年06月14日 04:26/ 0 赞/ 267 阅读

相关【前端】Vue路由

介绍为了提高浏览器页面响应速度，在功能的开发中，应该尽量避免创建多个页面，因为浏览器在页面的跳转过程中会先删除之前的界面，然后重新渲染新加载界面上的DOM元素，这一

喜欢ヅ旅行/ 2022年03月15日 12:50/ 0 赞/ 307 阅读

相关前端路由笔记

前端路由的实现本质：检测URL变化，获取url地址，解析url匹配页面；检测URL变化有两种方式： hash，HTML5 History 1. HTML5 Histo

た入场券/ 2022年03月06日 06:48/ 0 赞/ 311 阅读