首页 > 其他分享 >vue路由模式区别

vue路由模式区别

时间:2023-11-01 11:13:54浏览次数:30  
标签:vue 浏览器 区别 模式 hash 页面 路由 history

目的:

  在vue中路由模式有history和hash模式两种模式:他们的目的是为了在SPA单页面情况下,切换页面不会向后端服务器发送请求;

  hash模式: 为以#作为分隔符,

  原理:通过window.location.hash获取 hash值;监听hash中的hashchange事件,当URL的hash发生改变的时候,触发事件。

  在地址栏url中#后面hash值,hash虽然在url中,但是不会被包括在http请求中。对后端没有影响,不会导致页面的重新加载。

  history模式:他直接指向history对象,直接使用正常的路径形式,

  原理:使用h5 History API中的pushState和replaceState方法,可以在不刷新页面的情况下下修改浏览器的历史记录和URL。

 

history运用了浏览器的历史记录栈,之前有back,forward,go方法,之后在HTML5中新增了pushState()和replaceState()方法,它们提供了对历史记录进行修改的功能,不过在进行修改时,虽然改变了当前的URL,但是浏览器不会马上向后端发送请求。

 

hash路由支持低版本的浏览器,而history路由是HTML5新增的API。

 

hash路由支持低版本的浏览器,而history路由是HTML5新增的API。

标签:vue,浏览器,区别,模式,hash,页面,路由,history
From: https://www.cnblogs.com/laiweiguo/p/17802558.html

相关文章

  • vuejs3.0 从入门到精通——初始化项目——路由
    路由 VueRouter是Vue.js官方的路由管理器,它和Vue.js深度集成,用于构建单页面应用。Vue.js单页面应用是基于路由和组件映射的,路由用于配置访问路径,将组件(components)映射到路由路径(routes)。一、路由模式 VueRouter常用的两种模式是hash模式和HTML5模式,对应的创建......
  • 二、搭建前后端分离的自动化测试平台的前端Vue3+Element-plus前端项目
    一、安装Node.js以及配置环境变量1、Node获取地址https://nodejs.org/en/download一直默认选项安装,安装好了之后,在环境变量中会自动配置Node的地址,可以在cmd中使用node-v/npm-v命令验证是否下载成功2、设置Node的配置内容(1)在安装目录下新建两个文件夹命名为node_cache,和no......
  • vue3实现input输入框只能输入中文
    简单记录下,方便以后复制<el-inputv-model="form.name"placeholder="使用人的姓名":maxlength="20":formatter="(value)=>value.replace(/[^\u4E00-\u9FA5]/g,'')"/>......
  • 前端大文件切片上传,断点续传、秒传等解决方案,vue中使用实例
    先看逻辑如何切片?如何获取文件唯一hash?与后端交互获取文件上传的状态,用于判断情况,是秒传还是续传?上传切片文件,判断失败文件重新执行?全部上传完成通知后端?1、先上全部代码,后面第2部分解析、第3部分vue中使用相关依赖spark-md5主要用于拿取文件的md5mitt发布订阅importSparkMD5......
  • MySQL的create table as 与create table like区别
    一、区别对于mysql的复制相同表结构方法,有createtableas和createtablelike两种:createtablet2asselect*fromt1;as创建出来的t2表(新表)缺少t1表(源表)的索引信息,只有表结构相同,没有索引。createtablet2liket1;like创建出来的新表包含源表的完整表结构和索引......
  • [Vue]什么是组件化?
    组件的定义:实现应用中局部功能代码和资源的集合。   ......
  • web中静态资源和动态资源的区别
    **静态资源:**可以理解为前端的固定页面,这里面包含HTML、CSS、JS、图片等等,不需要查数据库也不需要程序处理,直接就能够显示的页面,也就是说不需要从后台通过读取数据库信息就可以将在html上的所有数据全部显示出来,他的访问数据由于是不需要从数据库拉取数据,故而访问速度很快。**动态......
  • App开发:Vue Native vs React Native
    随着移动应用开发框架数量的增加,2018年Vue Native的引入让开发者有能力使用Vue.js代码来创建ReactNative移动应用。因为VueNative围绕 React Native包装了Vue.js语法,所以框架非常相似。例如,两者都是跨平台框架,这意味着相同的代码库可以编译为适用于Android和iOS环......
  • 关于 vue 虚拟dom 的渲染机制的一些思考
    1.虚拟dom的渲染过程2.vue3中nexttick的作用 1.虚拟dom的渲染机制我们在template中写的div和其他的标签。不会被vue当作是最终渲染的dom,vue会将我们写入的标签转化为对象,通过diff算法,将其构造成一个虚拟树每个树都有一个对应的key,这个key作为不同阶段的标......
  • Vue2 基础入门
    1Vue1.2第一个Vue实例(HelloVue)1.3插值表达式{作用:利用表达式进行插值,渲染到页面中表达式:是可以被求值的代码,JS引擎会讲其计算出一个结果以下的情况都是表达式:money+100money-100money*10money/10price>=100?'真贵':'还行'obj.namearr[0]fn()ob......