关闭

两种前端路由的实现方式

时间: 2018-12-17阅读: 1024标签: 路由

两种前端路由的实现方式

前后端分离开发模式,后端会把路由控制丢在前端,这几天再开发单页面小的项目,手动撸了个路由。前端路由实现有两种方法。


1. history.pushState/ history.replaceState / window.popstate

html5 History API包括2个方法:history.pushState()和history.replaceState(),和1个事件:window.onpopstate。

pushState

history.pushState(stateObject, title, url),包括三个参数。

  • stateObject 存储该url对应的状态对象,该对象可在onpopstate事件中获取,也可在history对象中获取
  • title 目前浏览器未实现,为nul
  • 路径url,般设置为相对路径,如果设置为绝对路径时需要保证同源

pushState函数向浏览器的历史堆栈压入一个url为设定值的记录,并改变历史堆栈的当前指针至栈顶。


replaceState

该接口与pushState参数相同,含义也相同。唯一的区别在于replaceState是替换浏览器历史堆栈的当前历史记录为设定的url。需要注意的是,replaceState不会改动浏览器历史堆栈的当前指针。


onpopstate

该事件是window的属性。该事件会在调用浏览器的前进、后退以及执行history.forward、history.back、和history.go触发,因为这些操作有一个共性,即修改了历史堆栈的当前指针。在不改变document的前提下,一旦当前指针改变则会触发
下面是简易版本的实现方式:

<a data-href="/post"></a>
<a data-href="/login"></a>
const Router = [];
const addRoute = (path = '', handle = () => {}) => {
    let obj = {
        path,
        handle
    }
    Router.push(obj);
}
//添加路由定义
addRoute('/post', function() {
    //do something
});
addRoute('/login', function() {
    //do something
})
//路由处理
const routeHandle = (path) => {
    Router.forEach((item, index) => {
        if(item.path === path) {
            item.handle.apply(null, [path]);
            return true;
        }
    })
    return false;
}
//拦截默认的a标签行为
document.addEventListener('click', function(e) {
    let dataset = e.target.dataset;
    if(dataset) {
        if(routeHandle(dataset.href)) {
            //阻止默认行为
            e.preventDefault();
        }
    }
});


2.hash + location.onhashchange

实现原理是通过监听hash变化,触发onhashchange事件回调。hash的变化会导致历史记录栈的变化,从而实现路由。

一个简易版的router实现源码,功能如下

  • 切换页面
  • 异步加载js
  • 异步传参

原文来源:http://yuanhehe.cn/2017/06/19/两种前端路由的实现方式/

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1618

关闭

vue-router 中参数传递(params,query)

query和params的区别,query相当于get请求,在页面跳转的时候,可以在地址栏看到请求参数,然而params则相当于post请求,参数不会在地址栏中显示。

vue router 路由鉴权(非动态路由)

原本想用动态路由的思路去做,按权限加载对应路由表,但是由于权限可以交叉(比如一个人可以同时是主题管理员和数据服务管理员),导致权限路由表还是得去做判断组合。于是放弃了这个思路,索性就在beforeEach里直接判断了。

React-Router4.0跳转不置顶解决方案

在使用react-router时会遇到奇怪的问题,比如当我们从首页进入详情页的时候,首页跳转到详情页,首页滚动的位置,进入到详情页的时候也会被记录下来,原因是由于共享了同一个history,所以对记录有所保留,这显然不符合我们的浏览习惯。

从了解Hash和Html5 History 到简单实现路由

hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分),在页面中的hash有多种功能意义:浏览器读取到hash之后自动滚动到该对应元素所在位置的可视区域内

在 Vue.js 中使用嵌套路由

随着 Vue.js 单页应用(SPA)变得相当复杂,你开始需要 Vue 路由以及嵌套路由。嵌套路由允许更复杂的用户界面以及相互嵌套的组件。让我们创建一个相对简单的用例,来展示 Vue Router 中嵌套路由的实用性。

前端中的 hash 和 history 路由

前端路由有有 hash 路由和 history 路由两种路由方式,他们的原理是什么,又怎样实现一个简单的路由监听呢?我们在使用 Vue 或者 React 等前端渲染时,通常会有 hash 路由和 history 路由两种路由方式。

为你的 React 应用创建路由

通常,当用户在浏览器中键入 URL 时,会向服务器发送 HTTP 请求,然后服务器检索 HTML 页面。对于每个新URL,用户会被重定向到新的 HTML 页面。你可以通过参考下图来更好地理解路由的工作原理。

Flutter开发之导航与路由管理

所谓路由管理,就是管理页面之间如何跳转,也被称为导航管理。这和原生开发类似,无论是Android还是iOS,导航管理都是通过维护一个路由栈来实现的,路由入栈(push)操作对应打开一个新页面,路由出栈(pop)操作对应页面关闭操作

vue-router 导航守卫中 next 控制实现

使用 vue-router 的导航守卫钩子函数,某些钩子函数可以让开发者根据业务逻辑,控制是否进行下一步,或者进入到指定的路由。

使用 webpack 插件自动生成 vue 路由文件

一款自动生成 vue 路由文件的 webpack 插件 vue-route-webpack-plugin 在项目中试点成功了,现在在项目中已经不需要再维护路由配置文件了,由插件自动生成,节省了大家维护路由的时间。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!