zoukankan      html  css  js  c++  java
  • vue-Router的hash模式和history模式的区别

    vue-Router的hash模式和history模式

    hash模式

    hash模式是早期的前端路由,由location.hash实现。

    https://www.helloWorld.com#hashVal

    location.hash就是URL井号后面的hashVal

    hash路由实现的几个特性:

    • URL中的hash值只是一个客户端状态,并不会随着URL发发送到服务器,所以服务器接收到的永远是hash前面的域名,返回的就是设定好的页面;

    • hash值的改变可以在浏览器中留下一条历史记录,因此哈希路由可以前进回退;

    • 可以通过a标签来设置href属性,用户点击这个超链接hash值就改变,或者直接通过JavaScript设置location.hash设置hash值跳转到指定的路由;

    • 可以使用hashchange事件监听hash变化,对页面进行操作

    history模式

    history模式依赖于HTML5的History API。最主要的两个API如下:

    window.history.pushState(null, null, path)
    window.history.replaceState(null, null, path)

    history模式路由的实现主要根据以下特性:

    • pushState和replaceState两个API来操作实现URL的变化

    • 使用popState监听URL的变化,从而对页面进行跳转(渲染)

    • history.pushState()或history.replaceState()不会触发popstate事件,此时需要手动触发页面跳转(渲染)

    history模式需要后台配置404返回首页,否则访问后台不存在的路由则会返回404

  • 相关阅读:
    面向对象的设计原则
    在VC中Debug下是运行结果正确的,但是在Release下却有错,总算找到原因
    聚合和组合
    痛苦呀,代码
    MSDN和VS98
    阅读代码的难度
    好香,方便面
    人的重要性
    FIT For .NET(1)
    ASP.NET Microsoft .NET Pet Shop 3.x(二)
  • 原文地址:https://www.cnblogs.com/xincheng-1999/p/14889463.html
Copyright © 2011-2022 走看看