前端路由笔记

Acceml 发布于2019-08-23 15:30 / 3266人阅读

摘要：只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮，或者在代码中调用。原理在点击某个路由时执行，在操作浏览器时执行修改至不会引起页面刷新，而是当作新页面加到历史记录中。值变化会触发事件。

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

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

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!!"));

GPU云服务器云服务器笔记本怎么连接无线路由器前端路由 js前端路由 js前端路由原理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102153.html

学习前端路由和vue-router笔记

摘要：前端路由原理本质就是监听的变化，然后匹配路由规则，显示相应的页面，并且无须刷新。目前单页面使用的路由就只有两种实现方式就是，当后面的哈希值发生变化时，不会向服务器请求数据，可以通过事件来监听到的变化，从而进行跳转页面。前端路由原理本质就是监听 URL 的变化，然后匹配路由规则，显示相应的页面，并且无须刷新。目前单页面使用的路由就只有两种实现方式 hash history www....

李文鹏 2019-08-23 15:06 评论0 收藏0
Vue2.0实用笔记

摘要：实例中，可追踪数据发生变化时，会开启一个队列，把变化记录其中，在下一次事件循环前，进行去重优化，然后重新渲染。最早通过实现了这一需求，通过事件可监听的变化，实现不同页面的操作。过滤器的使用通过引入中 1、vue中的过渡、动画效果单组件（）v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六种状态。(定...

draveness 2019-08-23 16:09 评论0 收藏0
Vue2.0实用笔记

摘要：实例中，可追踪数据发生变化时，会开启一个队列，把变化记录其中，在下一次事件循环前，进行去重优化，然后重新渲染。最早通过实现了这一需求，通过事件可监听的变化，实现不同页面的操作。过滤器的使用通过引入中 1、vue中的过渡、动画效果单组件（）v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六种状态。(定...

maochunguang 2019-08-02 16:08 评论0 收藏0
Vue2.0实用笔记

摘要：实例中，可追踪数据发生变化时，会开启一个队列，把变化记录其中，在下一次事件循环前，进行去重优化，然后重新渲染。最早通过实现了这一需求，通过事件可监听的变化，实现不同页面的操作。过滤器的使用通过引入中 1、vue中的过渡、动画效果单组件（）v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六种状态。(定...

JowayYoung 2019-08-30 15:56 评论0 收藏0