Vue路由的模式和原理

一、hash模式(默认)

使用URL的hash来模拟一个完整的URL,当URL发生改变时不会向服务器发起请求。# 和其后面的字符称为hash,可通过 window.location.hash 获取。当hash改变会触发(包括浏览器的前进、后退)会触发window.location.hash值的变化,从而触发hashChange事件,会创建hashHistory对象

  • hashHistory.push()   将新的路由添加到浏览器历史记录栈的顶部
  • hasHistory.replace() 替换到当前栈

二、history模式

去掉了#号。利用了 HTML5新增的API由pushSate和replaceSate来完成URL的跳转,无需重新加载页面也不会向服务器发起请求。若手动点击刷新按钮或在地址栏输入完整URL才会向服务器发起请求,需要后端配合将所有访问都指向 index.html,否则会导致 404 错误。在点击浏览器后退按钮或js调用forward()、back()、go()时会触发popstate事件。

  • history.pushSate(object, title, url)  在浏览器历史记录栈中添加一条记录
  • history.replaceSate(object, title, url)  修改History对象的当前记录
  • history.state  可得到当前页的state信息

相同:都可以用作SPA单页的实现,不向服务器发起请求,动态渲染页面。

不相同:history模式访问相同的url照样会向浏览器历史记录添加一条路由,而hash不会添加。

三.abstract 路由模式(了解即可)

适用于所有JavaScript环境,例如服务器端使用Node.js。如果没有浏览器API,路由器将自动被强制进入此模式。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/4770.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Kafka(十二)Streams

目录 Streams1 什么式是流式处理2 流式处理的相关概念2.1 拓扑2.2 时间2.2.1 输入时间2.2.2 输出时间 2.3 状态2.4 流和表2.5 时间窗口2.5.1 测试时间窗口 2.6 处理保证 3 流式处理设计模式3.1 单事件处理3.2 使用本地状态3.3 多阶段处理和重分区3.4 使用外部查找:流…

【哈希】Leetcode 两数之和

题目讲解 1. 两数之和 算法讲解 我们希望让这个数组有序,然后再寻找的时候可以很快的找到是否存在这个target - nums[i],这里需要返回的是下标,所以需要一个数据结构保存key:nums AND val:index,因此我们…

Qt——置灰窗口

在Qt中&#xff0c;你可以使用QGraphicsEffect来将一个窗口置灰化。同时&#xff0c;你可以通过设置QGraphicsEffect来禁用整个窗口上的所有交互。下面是一个简单的示例代码&#xff0c;演示如何在Qt中将一个窗口置灰并禁用交互&#xff1a; #include <QtWidgets>int ma…

Java设计模式 _结构型模式_桥接模式

一、桥接模式 1、桥接模式 桥接模式&#xff08;Bridge Pattern&#xff09;是一种结构型设计模式。用于把一个类中多个维度的抽象化与实现化解耦&#xff0c;使得二者可以独立变化。 2、实现思路 使用桥接模式&#xff0c;一定要找到这个类中两个变化的维度&#xff1a;如支…

《深入理解mybatis原理》 MyBatis的架构设计以及实例分析

《深入理解mybatis原理》 MyBatis的架构设计以及实例分析 MyBatis是目前非常流行的ORM框架&#xff0c;它的功能很强大&#xff0c;然而其实现却比较简单、优雅。本文主要讲述MyBatis的架构设计思路&#xff0c;并且讨论MyBatis的几个核心部件&#xff0c;然后结合一个select查…

七彩虹(Colorful)隐星P16 2023款笔记本电脑原装出厂Win11系统镜像下载 带建Recovery一键还原功能

七彩虹原厂Windows预装OEM专用系统&#xff0c;恢复出厂开箱状态一模一样 适用型号&#xff1a;隐星P16 23 链接&#xff1a;https://pan.baidu.com/s/1Ig5MQMiC8k4VSuCOZRQHUw?pwdak5l 提取码&#xff1a;ak5l 原厂W11系统自带所有驱动、出厂时自带的主题与专用壁纸、系…

C# 使MessageBox.Show弹出框保持最前

要确保 MessageBox.Show 弹出框保持在最前面&#xff0c;你可以使用 MessageBoxOptions 枚举中的 SetForeground 选项。这将确保消息框置于其他窗口之前。 以下是如何在 C# 中使用 MessageBox.Show 来显示一个保持最前的消息框的示例代码&#xff1a; MessageBox.Show("…

如何确定DAC输出的最高速度

如何确定DAC输出的最高速度 一、引言 数字到模拟转换器(Digital-to-Analog Converter,简称DAC)是电子设备中常用的一个重要部件,其作用是将数字信号转换为模拟信号。在设计和使用DAC时,一个关键问题是确定DAC输出的最高速度,即能够实现的最大输出频率。本文将介绍如何确…

惠海原厂直销 H6922 升压恒压IC芯片 2.8-40V升48V60V72V80V100V方案 高效率 低功耗

升压恒压IC芯片是一种在2.8V至40V的宽输入电压范围内工作&#xff0c;并能够将输出电压升高到48V、60V、72V、80V甚至100V的芯片。这种芯片以高效率、低功耗为特点&#xff0c;因此非常适合于对电源效率和功耗有严格要求的应用领域。升压恒压IC芯片的工作原理通常基于电感和电容…

使用FPGA发送一个经过曼彻斯特编码的伪随机序列

介绍 这几天突然就不知道要使用FPGA实现什么样的功能了,然后就跑去学习数电了,学的也是晕晕的。正好之前写了一个使用FPGA发送伪随机序列的代码,然后因为需要使用曼彻斯特编码,所以又加了一个模块吧,使得最后输出的波形经过曼彻斯特编码。 曼彻斯特编码 首先,曼彻斯特编…

前端入门:HTML(css轮廓,填充,宽高)

1.CSS轮廓 注意&#xff1a; outline中&#xff0c;out-style是必须要设置的&#xff0c;格式为&#xff1a; outline-style一共有以下的几个值&#xff1a; 2.CSS填充属性 这是一个用于在一个元素的内容周围产生空间&#xff0c;也就是边框内到白框外之间的距离&#xff0c;…

Ubuntu 22.04 安装Oracle 11g Express Edition

目录 一、系统环境 二、预安装软件 三、安装Oracle 四、登录数据库 Ubuntu 22.04上安装Oracle 11g Express Edition的过程。 一、系统环境 操作系统&#xff1a;Ubuntu 22.04.4 LTS 数据库版本&#xff1a;Oracle Database 11g Express Edition Release 11.2.0.2.0 - 64b…

一款神奇的地理数据可视化python库

在地理信息系统&#xff08;GIS&#xff09;和地理数据可视化领域&#xff0c;Python的易用性和强大的库支持使其成为处理地理数据的理想选择之一。今天我们介绍Cartopy库&#xff0c;它为地理数据可视化提供了强大的支持。无论是对于GIS专业人士还是对地理数据可视化感兴趣的初…

机器人项目相关

机器人项目相关 1. Nvidia 1.1 Jetson 1.1.1 初步安装Riva教程 llamaspeakJetson AGX Orin踩坑记录&#xff08;1&#xff09;安装Riva 参考知乎链接&#xff1a;https://zhuanlan.zhihu.com/p/670007305 1.1.2 NVIDIA Jetson AI Lab 借助 NVIDIA Jetson™ 将生成式 AI…

前端光标操作获取光标位置,移动光标位置到最后

获取光标位置 const getCursorIndex ()>{// 获取当前光标位置setTimeout(()>{const selection window.getSelection();const range selection.getRangeAt(0);const offset range.startOffset;console.log(光标位置&#xff1a;, offset);}) }const selection windo…

Windows环境下nvm的安装与使用

nvm全名node.js version management&#xff0c;顾名思义是一个管理多个nodejs的版本工具。通过它可以安装和切换不同版本的 nodejs&#xff0c;为了解决 node.js各种版本存在不兼容现象可以通过它可以安装和切换不同版本。 一、下载 nvm安装包地址&#xff1a; https://gith…

vite: 项目中使用Sass

1.安装 npm add sass 注意&#xff1a;有些博客中会告诉你需要 安装sass-loader和sass&#xff0c;这是webpack项目中的做法。而在Vite环境中&#xff0c;如果你想使用Sass预处理器&#xff0c;实际上并不需要单独安装sass-loader。Vite默认集成了对Sass的支持&#xff0c;你…

工具方法 - 发挥你的优势

Use your strengths 懒惰或谦虚是否意味着有时你没有将自己的优势发挥到极致&#xff1f; 因为一旦你知道了自己的长处&#xff0c;那么作为一名优秀的团队成员&#xff0c;你的职责就是发挥这些长处。 自愿参加任何你能为之做出贡献的活动。 你的团队目前面临哪些挑战&#xf…

前端项目学习记录1:svg图标的封装与使用

1.下载svg依赖 pnpm i vite-plugin-svg-icons -D 还有一个&#xff0c;下面的不安装可能会报错 pnpm i fast-glob -D 2.vite.config.ts配置 import { defineConfig } from vite import vue from vitejs/plugin-vue import path from "path"; //引入svg需要用到的…

使用yolov8+QT+onnrunxtime进行开发的注意事项

1、本来想尝试做一个C的yolov8在QT5.15.2的应用&#xff1b; 因此&#xff0c;在实现这个目标的时候&#xff0c;我先用了yolov8自带的export进行导出&#xff0c;使用的代码很简单&#xff0c;如下所示&#xff1a; import os from ultralytics import YOLO# model YOLO(&q…