Vue2:路由的两种模式history模式和hash模式

一、情景说明

之前我们写的项目启动后,浏览器访问时,路径中会有个#/,会导致不够美观
因为一般的访问地址都是http://123.123.123.123/aaa/bbb这种形式
这一篇,就来解决这个问题
在这里插入图片描述

二、案例

1、hash模式

特点:#/后的路径,在向服务器发送请求时,被忽略。
关键配置:mode:'hash'
不配置mode的情况下,默认就是hash模式

export default new VueRouter({
	mode:'hash',	//不配置mode的情况下,默认就是hash模式
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        }
    ]
})

这种模式下,访问的路径都会带有/#/

2、history模式

关键配置:mode:'history'

export default new VueRouter({
	mode:'history',	//不配置mode的情况下,默认就是hash模式
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        }
    ]
})

效果:
会发现,/#/不见了
在这里插入图片描述

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

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

相关文章

【JavaEE进阶】 代理模式

文章目录 🍃前言🎋什么叫代理模式🌴静态代理🎍动态代理🚩JDK动态代理🚩CGLIB动态代理 ⭕总结 🍃前言 前面对Spring AOP的详细使用进行了介绍,这篇博客博主将详细讲解一下Spring AOP…

lottie加载带图片的json 预览

背景 产品看到一款app的动效很不错,让我去模仿实现。 第一步 获取apk中的静态资源 拿到这个app的apk后,直接使用压缩工具解压, assets文件夹就是静态资源的目录 静态资源里面有lottie 那么大部分的动效应该都是lottie实现的 网上找了很多…

Linux学习之信号

目录 1.信号的概念 2.信号的产生 3.信号的保存 4.信号的捕捉 信号的其它内容: SIGCHLD信号 1.信号的概念 在Linux中,信号是一种用于进程之间通信的基本机制。它是一种异步事件通知,用于通知进程发生了某些事件。如下是一些常见的Linux信…

DC-DC转换电路简介

DC-DC转换电路简介 1. 源由2. 工作原理3. 转换芯片4. DC-DC干扰5. DC-DC滤波5.1 PCB Layout5.2 电容滤波5.3 电感滤波 6. DC-DC电感/电容取值实验如何做?7. 参考资料 1. 源由 虽然说嵌入式系统涉及软件、硬件、机械、结构、网络等诸多领域内容。因此,在…

【MATLAB】 ICEEMDAN信号分解+FFT傅里叶频谱变换组合算法

有意向获取代码,请转文末观看代码获取方式~ 展示出图效果 1 ICEEMDAN信号分解算法 ICEEMDAN 分解又叫改进的自适应噪声完备集合经验模态分解,英文全称为 Improved Complete Ensemble Empirical Mode Decomposition with Adaptive Noise。 ICEEMDAN (I…

诊所门诊电子处方软件操作教程及试用版下载,医务室处方笺管理系统模板教程

诊所门诊电子处方软件操作教程及试用版下载,医务室处方笺管理系统模板教程 一、前言 以下软件程序教程以 佳易王诊所电子处方软件V17.0为例说明 软件文件下载可以点击最下方官网卡片——软件下载——试用版软件下载 如上图,点击基本信息设置——处方配…

一起去吃面条子吧

微风掠进窗沿,拂过愣在键盘上的指尖,正踌躇于命题的“||”还是“&&”。      突来的惬意,让人猛然惊醒,似是季节恍惚间悄然更替,那么这道命题索性就先放着。      毕竟实际编译运行结果,与…

实现定时器的两种方法:使用windows api定时器 和使用c++11/14 定时器

前言: 当我有一个开发需求,符合下面的条件 1.需要某个任务在程序中每隔一段时间就要执行一次,可能把这个任务封装成了一个函数。 2.这种需要定时执行的任务,有2个,3个....越来越多。 这个时候我们就可以考虑使用定时…

web基础03-JavaScript

目录 一、JavaScript基础 1.变量 2.输出 3.变量提升 4.区块 5.JavaScript数据类型 6.查看数值类型 7.undefined和null 8.布尔值 9.和的区别 10.算数/三元/比较/逻辑/赋值运算符 11.特殊字符 12.字符串 (1)获取字符串长度 (2&am…

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的番茄成熟度检测系统(Python+PySide6界面+训练代码)

摘要:开发番茄成熟度检测系统对于提高农业产量和食品加工效率具有重大意义。本篇博客详细介绍了如何利用深度学习构建一个番茄成熟度检测系统,并提供了完整的实现代码。该系统基于强大的YOLOv8算法,并结合了YOLOv7、YOLOv6、YOLOv5的对比&…

SpringBoot约定大于配置

什么是约定大于配置 "约定大于配置"(Convention Over Configuration)是一种理念,旨在通过默认约定和规则来减少开发人员需要做的配置工作。在Spring Boot框架中,这一原则得到了充分应用,帮助开发者更快地构…

300分钟吃透分布式缓存-15讲:如何深入理解、应用及扩展 Twemproxy?

Twemproxy 架构及应用 Twemproxy 是 Twitter 的一个开源架构,它是一个分片资源访问的代理组件。如下图所示,它可以封装资源池的分布及 hash 规则,解决后端部分节点异常后的探测和重连问题,让 client 访问尽可能简单,同…

AI时代,我们需要什么能力?

AI 时代,一定会重构很多行业,也会重构人民的生活工作方式,那么 AI 时代,我们需要培养什么能力呢? 我们应该去做那些 AI 做不了的事情!让 AI 成为我们的工具,助力我们更高效的解决问题&#xff…

Java - 获取汉字大写首字母输出

背景 有个项目需要将一批字符串的拼音首字母输出并大写&#xff0c;写了个工具类。 实现 需要引入外部jar。 <dependency><groupId>com.belerweb</groupId><artifactId>pinyin4j</artifactId><version>2.5.1</version> </dep…

C++之set、multiset

1、set简介 set是一种关联式容器&#xff0c;包含的key值唯一&#xff0c;所有元素都会在插入时自动被排序&#xff0c;其存储结构为红黑树。set只能通过迭代器(iterator)访问。 set和multiset的区别&#xff1a; &#xff08;1&#xff09;set不允许容器中有重复的元素&…

VUE3中的组件传值

一、父传子(props) 在子组件中可以使用defineProps接收父组件向子组件的传值 父组件fatherPage.vue&#xff1a; <template><div class"father"><button click"a a 1">按钮</button><childPage :a"a" /><…

在Windows系统上安装Docker和SteamCMD容器的详细指南有哪些?

在Windows系统上安装Docker和SteamCMD容器的详细指南有哪些&#xff1f; 安装Docker&#xff1a; 首先&#xff0c;需要在Windows操作系统上激活WSL2功能。这是因为Docker作为一个容器工具&#xff0c;依赖于已存在并运行的Linux内核环境。可以通过使用winget来安装Docker。具体…

禁止u盘拷贝的方法,U盘文件防止拷贝的方法

某大型制造企业在研发一款新产品时&#xff0c;涉及到了大量的机密数据和设计图纸。为了方便工作&#xff0c;研发部门的员工经常使用U盘在不同电脑之间传输数据。 然而&#xff0c;由于缺乏对U盘的有效管理&#xff0c;导致了一起严重的数据泄露事件。 事件经过&#xff1a;…

IEEE 802.11a协议

IEEE 802.11 系列协议主要使用了 OFDM 调制技术&#xff0c;是现今局域无线网的通用标准&#xff0c;被广泛应用于 WIFI 通信中&#xff0c;WIFI 版本及其对应的 802.11 协议版本如下&#xff1a; Wi-Fi 1 是 1999 年发布的 802.11b 标准。Wi-Fi 2 是 802.11a 标准&#xff0c…

Vue3_2024_2天【Vue3组合式setup用法及响应式ref和reactive】

第一&#xff1a;浅谈 | 不可不知 1.vue3目录介绍&#xff08;区别Vue2没有的&#xff09; vue3&#xff0c;默认使用ts语言&#xff0c;但是ts一开始无法识别某些文件&#xff0c;这里是系统默认配置&#xff1b; 2.vue2中的入口文件是main.js&#xff0c;而vue3这里的入口文…