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 模式。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

python中Pandas操作excel补全内容

补全ID、InStore、Date import random from datetime import datetime, timedeltaimport pandas as pdfile_path r"C:\Users\xb\Desktop\Books_1.xlsx" books pd.read_excel(iofile_path, skiprows3, usecols"C:F", dtype{"ID": str, "I…

40分钟学 Go 语言高并发:Goroutine基础与原理

Day 03 - goroutine基础与原理 1. goroutine创建和调度 1.1 goroutine基本特性 特性说明轻量级初始栈大小仅2KB,可动态增长调度方式协作式调度,由Go运行时管理创建成本创建成本很低,可同时运行数十万个通信方式通过channel进行通信&#x…

Python学习------第十天

数据容器-----元组 定义格式,特点,相关操作 元组一旦定义,就无法修改 元组内只有一个数据,后面必须加逗号 """ #元组 (1,"hello",True) #定义元组 t1 (1,"hello") t2 () t3 tuple() prin…

nwjs崩溃复现、 nwjs-控制台手动操纵、nwjs崩溃调用栈解码、剪切板例子中、nwjs混合模式、xdotool显示nwjs所有进程窗口列表

-1. nwjs在低版本ubuntu运行情况 ubuntu16.04运行nw-v0.93或0.89报错找不到NSS_3.30、GLIBC_2.25 uname -a #Linux Asus 4.15.0-112-generic #113~16.04.1-Ubuntu SMP Fri Jul 10 04:37:08 UTC 2020 x86_64 x86_64 x86_64 GNU/Linux cat /etc/issue #Ubuntu 16.04.7 LTS \n \l…

在自动驾驶进行大数据量因果推理实验时,如何减少无用功,提高实验效率?

在对实验结果做反事实推理时,通常需要对数据进行多次循环,然后对多次循环的结果进行处理,如果只在最后结果结束时,再进行处理,可能会由于反事实过程中某个参数设置错误,导致整个反事实实验出现错误&#xf…

DAY1 网络编程(TCP客户端服务器)

作业&#xff1a; TCP客户端服务器。 server服务器代码&#xff1a; #include <myhead.h> #define IP "192.168.110.52" #define PORT 8886 #define BACKLOG 20 int main(int argc, const char *argv[]) {int oldfdsocket(AF_INET,SOCK_STREAM,0);//IPV4通信…

Kafka怎么发送JAVA对象并在消费者端解析出JAVA对象--示例

1、在pom.xml中加入依赖 <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-stream-kafka</artifactId><version>3.1.6</version></dependency> 2、配置application.yml 加入Kafk…

【SQL实验】视图操作(菜单操作和命令操作)

完整代码在文章末尾【代码是自己的解答&#xff0c;并非标准答案&#xff0c;也有可能写错&#xff0c;文中可能会有不准确或待完善之处&#xff0c;恳请各位读者不吝批评指正&#xff0c;共同促进学习交流】 &#xff08;一&#xff09;菜单操作 1.建立视图“课程”&#xff…

python基础知识(七)——写入excel

一、写入excel 写入数据到excel wb load_workbook("testcase_api_wuye.xlsx") #打开一个已经存在的excel文件 sh wb["register"] #识别某一个表单 sh.cell(row 2,column 8).value "pass" #写入数据&#xff0c;单元格的值赋值 wb.sav…

MATLAB绘图基础11:3D图形绘制

参考书&#xff1a;《 M A T L A B {\rm MATLAB} MATLAB与学术图表绘制》(关东升)。 11.3D图形绘制 11.1 3D图概述 M A T L A B {\rm MATLAB} MATLAB的 3 D {\rm 3D} 3D图主要有&#xff1a; 3 D {\rm 3D} 3D散点图、 3 D {\rm 3D} 3D线图、 3 D {\rm 3D} 3D曲面图、 3 D {\rm…

ssm148基于Spring MVC框架的在线电影评价系统设计与实现+jsp(论文+源码)_kaic

毕 业 设 计&#xff08;论 文&#xff09; 题目&#xff1a;在线电影评价系统设计与实现 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本在线电影评价系…

激光slam学习笔记5---ubuntu2004部署运行fastlivo踩坑记录

背景&#xff1a;看看fastlivo论文&#xff0c;觉得挺有意思的&#xff0c;就本地部署跑跑看看效果。个人环境&#xff0c;ubuntu20.04。 一、概要 由于依赖比较多&#xff0c;个人构建工作空间&#xff0c;使用catkin_make编译 src├── FAST-LIVO├── livox_ros_driver…

12. 利用“文件组织”实现石头剪刀布小游戏

文章目录 概要整体架构流程技术名词解释小结 1. 概要 ~ Jack Qiao对米粒说&#xff1a;“前面咱们了解过“文件组织”&#xff0c;让我们利用“文件组织”来制作一个有趣的“石头、剪刀、布”小游戏。”举个栗子&#xff1a; > 程序随机生成一个选择&#xff08;石头、剪刀…

VRT: 关于视频修复的模型

VRT: 关于视频修复的模型 1. 视频修复的背景与重要性背景介绍&#xff1a;重要性&#xff1a; 2. VRT的重要性和研究背景VRT的背景&#xff1a;VRT的重要性&#xff1a; 3. 视频修复概述3.1 定义与目标3.2 与单图像修复的区别3.3 对时间信息利用的需求 4. VRT模型详解4.1 整体框…

Stable Diffusion经典应用场景

&#x1f33a;系列文章推荐&#x1f33a; 扩散模型系列文章正在持续的更新&#xff0c;更新节奏如下&#xff0c;先更新SD模型讲解&#xff0c;再更新相关的微调方法文章&#xff0c;敬请期待&#xff01;&#xff01;&#xff01;&#xff08;本文及其之前的文章均已更新&…

04 —— Webpack打包CSS代码

加载器css-loader &#xff1a;解析css代码 webpack 中文文档 | webpack中文文档 | webpack中文网 加载器style-loader&#xff1a;把解析后的css代码插入到DOM style-loader | webpack 中文文档 | webpack中文文档 | webpack中文网 准备css代码&#xff0c;放到src/login目…

springboot高校网上缴费综合务系统

摘 要 相比于以前的传统手工管理方式&#xff0c;智能化的管理方式可以大幅降低运营人员成本&#xff0c;实现了高校网上缴费综合务系统的标准化、制度化、程序化的管理&#xff0c;有效地防止了高校网上缴费综合务的随意管理&#xff0c;提高了信息的处理速度和精确度&#x…

IDEA怎么定位java类所用maven依赖版本及引用位置

在实际开发中&#xff0c;我们可能会遇到需要搞清楚代码所用依赖版本号及引用位置的场景&#xff0c;便于排查问题&#xff0c;怎么通过IDEA实现呢&#xff1f; 可以在IDEA中打开项目&#xff0c;右键点击maven的pom.xml文件&#xff0c;或者在maven窗口下选中项目&#xff0c;…

springMVC重点知识

一、springMVC请求流程 二、springMVC环境搭建 Idea 下创建 springmvc01 ⼯程 1、pom.xml 坐标添加 <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <maven.compiler.source>12</maven.compiler.source> …

django基于python 语言的酒店推荐系统

摘 要 酒店推荐系统旨在提供一个全面酒店推荐在线平台&#xff0c;该系统允许用户浏览不同的客房类型&#xff0c;并根据个人偏好和需求推荐合适的酒店客房。用户可以便捷地进行客房预订&#xff0c;并在抵达后简化入住登记流程。为了确保连续的住宿体验&#xff0c;系统还提供…