当前位置： 首页 > news >正文

Vue路由的模式和原理

news 2026/2/7 12:46:03

一、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，路由器将自动被强制进入此模式。

相关文章：

Vue路由的模式和原理

一、hash模式（默认） 使用URL的hash来模拟一个完整的URL，当URL发生改变时不会向服务器发起请求。# 和其后面的字符称为hash，可通过 window.location.hash 获取。当hash改变会触发（包括浏览器的前进、后退）会…...

编程日记 2024/5/8 5:10:31

在K8S中，静态、动态、自主式Pod有何区别

在Kubernetes（简称K8s）中，静态Pod、自主式Pod和动态Pod是不同管理方式下的Pod类型，它们的区别主要体现在创建和管理方式上： 静态Pod： 静态Pod是由kubelet直接管理的，其配置文件存储在节点本地而…...

编程日记 2024/5/8 5:09:29

【Three.js基础学习】15.scroll-based-animation

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 前言 课程要点 结合html等场景 做滚动动画 1.遇到的问题， 在向下滚动时，下方会显白（部分浏览器） 解决：alpha:true …...

编程日记 2024/5/8 5:08:28

ubantu安装mysql

安装 准备：下载：版本5.1.17的MySQL并上传至Ubuntu系统 #解压 tar -xvf mysql-server_5.7.17-1ubuntu16.10_amd64.deb-bundle.tar #提前安装插件 sudo apt-get install libaio1 libmecab2 #若安装失败使用以下命令 apt --fix-broken install sudo apt-g…...

编程日记 2024/5/8 5:07:27

注意！华为HCIP-Datacom认证考试题有变化！

01 注意 HCIP Datacom H12-831考试变题了，最近要考试的多观望一下，821目前稳定。 华为HCIP考试以后要加难度，增加实验题，还没考完的小伙伴抓紧时间了。 02 华为HCIP认证大更新 未来将增加实验考试，拒绝背题库的Pass&a…...

编程日记 2024/5/8 5:05:25

你是我的荣耀 | 林先生：从酷爱数学到毕业走向数据分析岗位

人物背景： 研究生国家奖学金、本科生国家奖学金、学业奖学金一等奖、上海市优秀毕业生； 应用统计专业 CPDA优秀学员 ## 为什么选择数据分析相关专业 我是应用统计专业的一个应届毕业生，目前在一家上海市属的国企，从事数据分析相关…...

编程日记 2024/5/8 5:04:24

操作系统真象还原-bochs安装

今天读了《操作系统真象还原》这本书，写上比较幽默通俗。书中例子需要安装一个bochs系统，记录一下安装过程。参考了书中1.4，1.5两节，书中尽让有两处问题，也记录了下来。 1.3 操作系统的宿主环境 下载地址&#xff1a…...

编程日记 2024/5/8 5:02:22

windows平台安装labelme

之前写过一篇文章也是关于在windows平台安装labelme的：《windows平台python版labelme安装与使用_labelme下载-CSDN博客》，随着软件与工具的更新换代，按照同样的方法最近在使用的时候出现了错误，出现创建虚拟环境失败，具…...

编程日记 2024/5/8 5:01:20

微服务之SpringCloud AlibabaSeata处理分布式事务

一、概述 1.1背景 一次业务操作需要跨多个数据源或需要跨多个系统进行远程调用，就会产生分布式事务问题 but 关系型数据库提供的能力是基于单机事务的，一旦遇到分布式事务场景，就需要通过更多其他技术手段来解决问题。 全局事务：…...

编程日记 2024/5/8 5:00:19

2005-2021年全国各地级市生态环境注意力/环保注意力数据（根据政府报告文本词频统计）

2005-2021年全国各地级市生态环境注意力/环保注意力数据（根据政府报告文本词频统计） 2005-2021年全国各地级市生态环境注意力/环保注意力数据（根据政府报告文本词频统计） 1、时间：2005-2021年 2、范围：2…...

编程日记 2024/5/8 4:59:18

熟悉这些道理可以让人更好地应对各种挑战和困难。

1. 为别人尽最大的力量，最后就是为自己尽最大的力量。——罗斯金 2. 世上有一条永恒不变的法则:当你不在乎，你就得到。当你变好，你才会遇到更好的。只有当你变强大，你才不害怕孤单。当你不害怕孤单，你才能够宁缺毋滥。…...

编程日记 2024/5/8 4:58:17

AI去衣技术在动画制作中的应用

随着科技的发展，人工智能（AI）已经在各个领域中发挥了重要作用，其中包括动画制作。在动画制作中，AI去衣技术是一个重要的工具，它可以帮助动画师们更加高效地完成工作。 AI去衣技术是一种基于人工智能的图像…...

编程日记 2024/5/8 4:57:16

卷积神经网络要点和难点实际案例和代码解析

卷积神经网络（Convolutional Neural Networks，CNN）是一类包含卷积计算且具有深度结构的前馈神经网络，是深度学习的代表算法之一。卷积神经网络仿造生物的视知觉机制构建，可以进行监督学习和非监督学习，其隐含层内的卷积核参数共享和层间连接的稀疏性使得卷积神经网络能够…...

编程日记 2024/5/8 4:56:15

initramfs及rpm/dracut操作

一、背景 更新bundle包后发现系统异常。 定位发现驱动升级不成功，内核启动后加载的还是更新前的旧驱动。但等内核启动完成后，卸载旧驱动手动insmod新驱动，是可以加载成功的。 驱动的安装目录在/lib/modules/$KERNELVERSION/extra目录下。 …...

编程日记 2024/5/8 4:54:13

Kafka 2.13-3.7.0 在 Windows 上的安装与配置指南

在本文中，我将引导您完成在Windows操作系统上安装Apache Kafka 2.13-3.7.0的全过程，包括下载Scala运行环境、Kafka软件包、配置相关设置，并最终启动Kafka服务。此外，还会简要介绍如何使用客户端工具进行查看和管理。 Kafka的命名…...

编程日记 2024/5/8 4:53:12

C++ 顺序线性表的功能

顺序线性表的功能 //头文件 #pragma once#define LIST_INIT_SIZE 50 #define LIST_INCREMENT 20 #define OK 1 #define ERROR 0typedef int Status;typedef char ElemType;typedef struct list_ {ElemType* elem;int length;int listize; }SqList;// 1 初始化 函数 Status…...

编程日记 2024/5/8 4:52:10

C++面经 每日一问（二）

将引用作为函数参数有什么影响？ 传递引用给函数与传递指针的效果相同。这意味着被调函数中的形参变量将成为主调函数中实参的别名，从而直接对目标对象进行操作。相比于传递指针，这种方式消除了对指针的繁琐操作，提高了代码的清晰性…...

编程日记 2024/5/8 4:51:09

最新版Ceph( Reef版本)块存储简单对接k8s

当前ceph 你的ceph集群上执行 1.创建名为k8s-rbd 的存储池 ceph osd pool create k8s-rbd 64 642.初始化 rbd pool init k8s-rbd3 创建k8s访问块设备的认证用户 ceph auth get-or-create client.kubernetes mon profile rbd osd profile rbd poolk8s-rbd部署 ceph-rbd-csi c…...

编程日记 2024/5/8 4:50:08

Vue生命周期都有哪些？

定义 Vue的生命周期就是实例从创建到销毁的一个过程&#xff0c;即从创建、初始化数据、编译模板、挂载Dom($el)->渲染、更新->渲染&#xff0c;卸载等一系列的过程。el是挂载点如<div id"app"></div>。 Vue的生命周期分为八个阶段 1.beforeCreate…...

编程日记 2024/5/8 4:47:04

景源畅信：个人抖音小店怎么开通?

在数字时代的浪潮中&#xff0c;个体创业已不再是遥不可及的梦想。特别是随着短视频平台的崛起&#xff0c;抖音不仅成为人们娱乐消遣的新宠&#xff0c;更是众多创业者眼中的“新大陆”。你是否也曾憧憬过在抖音上开一家属于自己的小店?那么&#xff0c;如何开通个人抖音小店…...

编程日记 2024/5/8 4:46:03

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

编程新知 2026/2/5 15:43:28

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

编程新知 2026/1/24 14:59:08

Frozen-Flask ：将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

编程新知 2025/12/5 20:57:13

Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

编程新知 2025/11/6 8:47:31

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

编程新知 2025/9/11 11:00:29

BCS 2025｜百度副总裁陈洋：智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

编程新知 2026/2/1 11:33:19

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式： 数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本 模型并行：将模型分割到不同设备，每个设备处理部分模型计算 现代大模型训练通常结合…...

编程新知 2025/12/10 20:45:02

ios苹果系统，js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

编程新知 2026/2/4 19:47:03

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

编程新知 2025/8/6 2:19:46

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要&#xff1a; 近期&#xff0c;在使用较新版本的OpenSSH客户端连接老旧SSH服务器时&#xff0c;会遇到 "no matching key exchange method found"​, "n…...

编程新知 2025/9/29 4:00:38