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

  • 相关阅读:
    JS中的事件
    页面中图标的使用
    关于git,你需要知道一点命令
    H5一二事
    对js中Function的浅见
    浅谈JS中的继承
    关于JS变量提升的一些坑
    java自旋锁
    vue数据绑定原理
    JavaScript中的设计模式:状态模式
  • 原文地址:https://www.cnblogs.com/xincheng-1999/p/14889463.html
Copyright © 2011-2022 走看看