前端路由的两种模式

2020-07-21  本文已影响0人  darkTi

一、hash模式

二、history模式

虽然它的url样子会好看一些,但是history模式有一个问题就是,如果用户F5刷新,它是会去请求服务器的,一旦服务器上没有相对应的资源,那么就会刷出404来;在hash模式中,前端路由修改的是#后面的内容,因为浏览器请求是不带#后面的内容的,所以这个对于hash是没有影响的;

三、实现一个简单路由

class Routers {
  constructor(){
    //以键对值形式存储路由
    this.routes = {}
    //当前路由的url
    this.currentUrl = ''
    //绑定this,防止监听时this改变
    this.refresh = this.refresh.bind(this)
    window.addEventListener('load',this.refresh)
    window.addEventListener('hashchange',this.refresh)
  }
  //将path路径及对应的函数储存起来
  routeCb(path,callback){
    this.routes[path] = callback || function(){}
  }
  //刷新
  refresh(){
    //获取当前路径的hash值
    this.currentUrl = location.hash.slice(1) || '/'
    //执行当前hash路径对应的函数
    this.routes[this.currentUrl]()
  }
}

代码实现: http://js.jirengu.com/sakawobaxi/2/edit

上一篇下一篇

猜你喜欢

热点阅读