首页 > 其他分享 >Vue的hash/history模式

Vue的hash/history模式

时间:2023-01-09 11:47:57浏览次数:40  
标签:Vue hash URL API 跳转 pushState history

hash路由模式

  • URL 中的 hash 值只是客户端的一种状态,向服务端发送请求的时候,hash 部分不会被发送;
  • hash 值得改变会在浏览器的历史记增加访问记录,所以可以通过浏览器的回退、前进控制 hash 值的改变;
  • 可以通过 a 标签设置 href 值或者通过 js 给location.hash 赋值来改变 hash 值;
  • 可以通过hashchang 事件来监听 hash 值的变化,从而对页面进行跳转(渲染);

 

history路由模式

HTML5提供了 history API 来实现 URL 的变化,其中最主要的 API 有以下两个:history.pushState()history.replaceState()。这两个API 可以在不刷新的情况下操作浏览器的历史记录,不同的是,前者是新增一个历史记录,后者是直接替换当前的历史记录。

  • 通过 pushState 和 replaceState 两个API 来操作实现 URL 的变化;
  • 可以通过 popstate 事件来监听 URL 的变化,从而对页面进行跳转(渲染);
  • history.pushState() 或 history.replaceState() 不会触发 popstate 事件,需要手动触发页面跳转;
  • 需要后台配置支持;

标签:Vue,hash,URL,API,跳转,pushState,history
From: https://www.cnblogs.com/ligd2022/p/17036525.html

相关文章

  • vue3+vite2 vite.config.js 配置
    vite配置官方文档:https://cn.vitejs.dev/config/shared-options.html#base 开发服务器选项-serverserver:{//host:指定服务器应该监听哪个ip地址。如果设置为......
  • vue2 element-ui组件二封-表单组件-按钮封装
    这里是一段我们公司过往项目的代码(增删改查项目中的查询/重置按钮)<el-button@click="query()"type="primary"size="mini"><iclass="el-icon-search">查询</i><......
  • vue2组件props;computed监控变量,watch执行方法
    props:{mesData:{type:Object,//接受父组件值required:true,},tableLod:{type:Function,......
  • vue项目部署到IIS服务器
    步骤一:复制文件把build之后的文件(dist文件夹)拷贝到IIS存放网站文件的目录步骤二:在IIS中新建站点步骤三:下载安装模块:urlrewrite传送门:https://www.iis.net/downloads/m......
  • 前端 vue 静态页面
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="viewport"content="width=......
  • 手写获取手机验证码按钮-适用vue,uniapp
    template<uni-forms-itemlabel="验证码"name="code"style="position:relative;"><inputmaxlength="6"type="number......
  • 每日一题之Vue的异步更新实现原理是怎样的?
    最近面试总是会被问到这么一个问题:在使用vue的时候,将for循环中声明的变量i从1增加到100,然后将i展示到页面上,页面上的i是从1跳到100,还是会怎样?答案当然是只会显示100,并不会......
  • 前端二面经典vue面试题指南
    v-model的原理?我们在vue项目中主要使用v-model指令在表单input、textarea、select等元素上创建双向数据绑定,我们知道v-model本质上不过是语法糖,v-model在内部为......
  • 百度前端经典vue面试题整理
    子组件可以直接改变父组件的数据吗?子组件不可以直接改变父组件的数据。这样做主要是为了维护父子组件的单向数据流。每次父级组件发生更新时,子组件中所有的prop都将会刷......
  • 每日一题之Vue数据劫持原理是什么?
    什么是数据劫持?定义:数据劫持,指的是在访问或者修改对象的某个属性时,通过一段代码拦截这个行为,进行额外的操作或者修改返回结果。简单地说,就是当我们触发函数的时候动......