Vue Router - 前端路由实现思路(三种模式:hash、history、memory)

1.路由是什么

  • 搞清楚这几个概念:
  • 路由
  • 分发
  • 路由表
  • 默认路由
    如果没有#n,就给一个默认值
    number = number || 1;
  • 404 路由 / 保底路由
    如果用户输入了错误路径,就给一个404页面,保证用户总是能够看到一个页面
  • 嵌套路由

1.1 路由器

  • 如果家里有1个即以上的人要上网,就需要一个路由器
  • 上网路由
    1.用户上网连接路由器,路由器看你想连哪里,就会把信号包发给相应的地方(百度、抖音、腾讯等)
    2.分发:分别发送到各个地方
    3.路由就是分发请求,路由器就是分发请求的东西
    4.路由都是一对多的(一个用户可以发送多个请求到不同地方)
  • 总结:分发请求的对象就是路由

1.2 前端路由

  • 路由表:一个存储到各个目的地的最佳路径的表
    路由根据路由表来传送
  • 前端路由
    根据用户提供的url是:http://127.0.0.1/#1、#2、#3、#4分别展示DIV1、DIV2、DIV3、DIV4界面
  • hash:hash就是url中#及其后面的内容
  • hash变化
    当URL的片段标识符更改时,将触发hashchange事件 (跟在#符号后面的URL部分,包括#符号)
  • 代码优化逻辑
    1.重复的代码放到一个函数里面
    2.if…else:
    —如果两个都要执行同一句代码,则放到外面;
    —如果if不需要操作,则把判断翻转(加个!)把else内容放到if中,不要else

1.3 路由表

  • hash和div的关系是可以自定义的
    比如:hash给了1,可以找 div1或者 divone
const routeTable = {
  // 表驱动编程,这样写了HTML里面就不需要div了
  "1": div1,
  "2": div2,
  "3": div3,
  "4": div4
};

function route(){
//根据表来寻找对应的div
let div = routeTable[number.toString()];
}

1.4 嵌套路由

  • 如果#1界面里面还有几块子界面:#1/1、#1/2、#1/3
    1.那么就不是在app里面路由,而是在div1里面做路由
    2.所以要给route函数一个参数container,也就是要在哪里路由,容器是哪一个
    3.这样就不需要app这个参数了,而是直接container代替
    4.后面再调用route的时候就需要传参:app
  • 和之前的路由一样,给一个hash表:route1Table
  • 后面的思路
    1.把1/1分割成两个部分:[1,1]
    2.第一个1就用第一层路由去渲染,就得到了div1
    3.第二个1就用第二个路由去渲染,就在div1里面得到了div11
  • 路由可以再分层

2.路由的三种模式

  • hash 模式:代码
    任何情况都可以用hash做前端路由
    缺点:SEO不友好,服务器收不到hash(浏览器是不会把#后面的内容发给服务器的,永远只展示默认路由)
    谷歌有专门针对hash的SEO,但没什么用
  • history 模式:代码
    后端将所有前端路由都渲染同一页面
    用户不管请求什么都到同一个页面(不能是404页面)
    缺点:IE8以下不支持
  • memory 模式:代码
    既不用hash,也不用history,用对象来存储
  • 三种模式的区别
    1.前面两种模式都是路径存在url上面(前者是存的hash,后者是路径)
    2.memory是单机路由,不可分享

2.1 hash模式

  • 从hash中得到number
    let number = window.location.hash.substr(1);
    有#号,要去掉
  • 路径:/#1

2.2 history 模式

  • codesandbox网页就支持这个模式
    不论用户后面输入什么乱码(没有路由的情况),都是首页
  • 区别
    1.从pathname得到number
    let number = window.location.pathname
    2.routeTable中的key要变成"/1"
    3.a标签中的href由 #n 变成 /n
  • 路径:/1
    不需要#
    Vue Router - 前端路由实现思路(三种模式:hash、history、memory)
  • 目前的体验:每次点击都要重新渲染页面,很慢
  • 解决:history API
 // 无论点击哪个a标签,跳转到的href页面
//href由我们指定
 window.history.pushState(null, `page ${href}`, href);

2.3 hash模式和history模式对比

  • 使用条件不用

  • number的获取方式不同

  • a标签的点击事件不同
    1.history需要阻止默认事件:刷新页面
    2.得到href,然后通过window.history.pushState去相应的href,页面就会在不刷新的情况下变更

  • 没有可监听的事件,需要手动通知href改变,然后调用router函数

  • 默认页面不同
    1.number默认是/,是存在的

  • 点击a标签后,默认做两件事
    1.改变url默认不刷新页面
    2.重新路由

 if (number === "/") {
    number = "/1";
  }

2.4 memory 模式

  • hash和history都有一个共同点
    把所有数据存在路径后面,不论是/1还是/#1,这里的东西一变,所有的东西都改变
    Vue Router - 前端路由实现思路(三种模式:hash、history、memory)
  • memory不用这个地方,这里不改变,页面不改变
    使用localstorage
    Vue Router - 前端路由实现思路(三种模式:hash、history、memory)
  • 优点
    这种模式适合非浏览器
    比如说app里面做路由,app里面没有路径,不是网页,就用memory模式
  • 缺点:没有url
    只对单机有效
    页面没有链接 复制给别人只能进入初始状态

3.Vue-Router 源码

上一篇:移动端适配问题


下一篇:python简单爬虫