Vue Router两种路由实现方式异同点总结

Vue.js 中的路由主要通过 Vue Router 实现,它支持多种路由模式,其中最常用的两种是 hash 模式和 history 模式。这两种模式在 URL 结构、工作原理以及对服务器配置的要求上有所不同。

1.Hash 模式(默认模式)

‌URL 结构‌:

URL 中带有一个 # 符号,例如 http://example.com/#/about。
#符号及其后面的内容在 HTTP 请求中不会被发送到服务器,因此不会影响服务器端的路由处理。

‌工作原理‌:

Vue Router 通过监听浏览器地址栏中的 hash 变化来触发相应的路由处理。
当用户点击一个带有 hash 的链接时,浏览器会更新地址栏中的 URL,但不会重新加载页面。
Vue Router 监听到 hash 的变化后,会根据新的 hash 值来渲染对应的组件。

‌服务器配置‌:

因为 hash 部分不会被发送到服务器,所以服务器不需要做特殊处理,可以直接返回同一个 index.html 文件。

2. History 模式

‌URL 结构‌:

URL 中没有 # 符号,看起来更接近于传统的 URL,例如 http://example.com/about。
这种方式使用了 HTML5 的 History API 来实现 URL 的跳转和管理。

‌工作原理‌:

Vue Router 通过监听浏览器地址栏中的路径变化(而不是 hash 变化)来触发相应的路由处理。
当用户点击一个链接时,浏览器会更新地址栏中的 URL,并尝试加载新的页面。
但由于 Vue Router 拦截了这些请求,并通过 History API 进行了页面渲染,所以实际上页面并不会重新加载。

‌服务器配置‌:

因为路径变化会被发送到服务器,所以服务器需要配置为对所有路由请求都返回同一个 index.html 文件(或者对应的单页应用入口文件)。
如果服务器没有正确配置,当用户直接访问某个路由(如通过刷新页面或输入 URL)时,可能会收到 404 错误。
总结
‌Hash 模式‌:简单、兼容性好(不需要服务器配置),但 URL 中带有 # 符号,可能不太美观。
‌History 模式‌:URL 更美观,但需要服务器支持并正确配置。

选择哪种模式主要取决于你的应用需求和服务器配置能力。如果希望 URL 更简洁、更符合传统 URL 的习惯,可以选择 History 模式;如果希望更简单、不需要服务器配置,可以选择 Hash 模式。

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

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

相关文章

ubuntu下连接了192.168.1.x和192.168.2.x两个网络段,如何让这个两个网段互相通信?

在 Ubuntu 上连接两个网络段(如 个人终端A 192.168.1.10 和 个人终端B 192.168.2.10),需要配置路由和网络转发功能,使这两个网段能够相互通信。以下是实现方法: 步骤 1:确认网络配置 1. 确保 Ubuntu 机器…

汽车资讯新高度:Spring Boot技术飞跃

6系统测试 6.1概念和意义 测试的定义:程序测试是为了发现错误而执行程序的过程。测试(Testing)的任务与目的可以描述为: 目的:发现程序的错误; 任务:通过在计算机上执行程序,暴露程序中潜在的错误。 另一个…

03-axios常用的请求方法、axios错误处理

欢迎来到“雪碧聊技术”CSDN博客! 在这里,您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者,还是具有一定经验的开发者,相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导,我将…

机器学习基础04_朴素贝叶斯分类决策树分类

目录 一、朴素贝叶斯分类理论 1、贝叶斯分类理论 2、条件概率 3、全概率公式 4、贝叶斯推断 5、朴素贝叶斯推断 6、拉普拉斯平滑系数 二、决策树分类 1、相关概念 2、基于信息增益决策树的建立 3、基于基尼指数决策树的建立 一、朴素贝叶斯分类理论 1、贝叶斯分类理…

git日志查询和导出

背景 查看git的提交记录并下载 操作 1、找到你idea代码的路径,然后 git bash here打开窗口 2、下载所有的日志记录 git log > commit.log3、下载特定日期范围内记录 git log --since"2024-09-01" --until"2024-11-18" 你的分支 > c…

后台管理系统(开箱即用)

很久没有更新博客了,给大家带上一波福利吧,大佬勿扰 现在市面上流行的后台管理模板很多,若依,芋道等,可是这些框架对我们来说可能会有点重,所以我自己从0到1写了一个后台管理模板,你们使用时候可扩展性也会更高 项目主要功能: 成员管理,部门管理&#…

Spring Boot 牛刀小试 org.springframework.boot:spring-boot-maven-plugin:找不到类错误

今天看了下书翻了下Spring Boot的用法,下载idea后, 反复出现org.springframework.boot:spring-boot-maven-plugin:找不到类错误,后来看了下调试窗口,发现是连不上maven的网站443错误,解决思路很简单,把ide连…

数据中心的拥塞控制

前面提到,如今的高速网络方案集中在卸载主机网络能力,降低主机处理时延,甚至 PFC 用网络排队时延换主机时延,本末倒置。而在拥塞控制领域仍是传统的 AIMD 闭环反馈,ECN,QCN 那一套,但拥塞是端到…

【网络云计算】2024第48周-技能大赛-初赛篇

文章目录 1、比赛前提2、比赛题目2.1、 修改CentOS Stream系统的主机名称,写出至少3种方式,并截图带时间戳和姓名,精确到秒,否则零分2.2、 创建一个名为你的名字的拼音的缩写的新用户并设置密码,将用户名添加到 develo…

SAP+Internet主题HTML样式选择

SAP目前只支持三种HTML样式选择: 样式一 背景色:深色,蓝 特点:适中型排列,与SAP界面排列相同,富含UI特征,整齐美观 URL地址:http://cn1000-sap-01.sc.com:8000/sap/bc/gui/sap/it…

鸿蒙动画开发07——粒子动画

1、概 述 粒子动画是在一定范围内随机生成的大量粒子产生运动而组成的动画。 动画元素是一个个粒子,这些粒子可以是圆点、图片。我们可以通过对粒子在颜色、透明度、大小、速度、加速度、自旋角度等维度变化做动画,来营造一种氛围感,比如下…

Java 使用MyBatis-Plus数据操作关键字冲突报错You have an error in your SQL syntax问题

问题 这个报错是出现在Java Spring boot项目中,使用MyBatis-Plus通过创建的实体类对数据库的操作过程中,通过实体创建数据库表是没有问题的,而在接口调用服务类操作数据库的时候,会出现报错。报错详情如下: 服务请求异…

<项目代码>YOLOv8 草莓成熟识别<目标检测>

YOLOv8是一种单阶段(one-stage)检测算法,它将目标检测问题转化为一个回归问题,能够在一次前向传播过程中同时完成目标的分类和定位任务。相较于两阶段检测算法(如Faster R-CNN),YOLOv8具有更高的…

Django5 2024全栈开发指南(一):框架简介、环境搭建与项目结构

目录 一、Python Web框架要点二、Django流程2.1 Django介绍2.1.1 简介2.1.2 特点2.1.3 MVT模式2.1.4 Django新特性2.1.5 Django学习资料 2.2 搭建Django框架开发环境2.2.1 安装Python语言环境2.2.2 安装Django框架 2.3 创建Django项目2.4 Pycharm创建项目2.5 初试Django52.5.1 …

Flutter:Dio下载文件到本地

import dart:io; import package:dio/dio.dart;main(){// 创建dio对象final dio Dio();// 下载地址var url https://*******.org/files/1.0.0.apk;// 手机端路径String savePath Directory.systemTemp.path/ceshi.apk;print(savePath);downLoad(dio,url,savePath); }downLo…

Golang | Leetcode Golang题解之第564题寻找最近的回文数

题目: 题解: func nearestPalindromic(n string) string {m : len(n)candidates : []int{int(math.Pow10(m-1)) - 1, int(math.Pow10(m)) 1}selfPrefix, _ : strconv.Atoi(n[:(m1)/2])for _, x : range []int{selfPrefix - 1, selfPrefix, selfPrefix …

鸿蒙原生应用开发元服务 元服务是什么?和App的关系?(保姆级步骤)

元服务是什么?和App的关系? 元服务是是一种HarmonyOS轻量应用形态,用户无需安装即可使用,具备随处可及、服务直达、自由流转的特征。 元服务是可以独立部署和运行的程序实体,独立于应用,不依赖应用可独立…

Exadata: 将数据库硬件和软件设计在一起

Engineering Database Hardware and Software Together,是Juan Loaiza在2015 VLDB大会上的Keynotes。虽然是10年前的文章,但其中一些要点一直延续至今,并未改变。 本文将讲解Keynotes摘要和演讲中的要点。 摘要 其中的一些观点&#xff1a…

Windows配置域名映射IP

一、找到 hosts 文件 打开 C:\Windows\System32\drivers\etc 二、添加hosts文件修改、写入权限 右击hosts文件,点击属性 -> 安全 -> Users -> 编辑 -> Users -> 添加修改、写入权限 -> 确定 -> 确定 进入常规,将只读属性关闭 三、…

173. 二叉搜索树迭代器【 力扣(LeetCode) 】

文章目录 零、原题链接一、题目描述二、测试用例三、解题思路四、参考代码 零、原题链接 173. 二叉搜索树迭代器 一、题目描述 实现一个二叉搜索树迭代器类BSTIterator ,表示一个按中序遍历二叉搜索树(BST)的迭代器: BSTIterato…