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

news2024/9/21 12:36:25

一、情景说明

之前我们写的项目启动后,浏览器访问时,路径中会有个#/,会导致不够美观
因为一般的访问地址都是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.coloradmin.cn/o/1481694.html

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

相关文章

QMessageBox用法及技巧

一.QMessageBox是什么? QMessageBox类为用户提供了主要的警告信息,用户可以根据需求选择需要的响应; QMessageBox 还提供了一些常用的按钮,例如"确定"、"取消"、"是"、"否"…

redis 面试题

1 redis 如何扩容 Redis 的扩容主要分为两种场景,一种是单实例的内存扩容(垂直扩容),另一种是Redis集群的扩容(水平扩容)。 单实例Redis内存扩容(垂直扩容) 硬件升级: 垂…

Spring MVC 和 Spring Cloud Gateway不兼容性问题

当启动SpringCloudGateway网关服务的时候,没注意好依赖问题,出现了这个问题: Spring MVC found on classpath, which is incompatible with Spring Cloud Gateway. 解决办法就是:删除SpringMVC的依赖,即下列依赖。 &…

年轻人怎么搞钱?

年轻人想要搞钱,可以考虑以下几个方面: 1. 创业:年轻人可以通过自己的创意,找到一个市场的空缺,开创自己的业务。可以从比较小的项目开始,逐渐扩大范围,积累经验和财富。 2. 投资:…

【C++从0到王者】第四十八站:最短路径

文章目录 一、最短路径二、单源最短路径 -- Dijkstra算法1.单源最短路径问题2.算法思想3.代码实现4.负权值带来的问题 三、单源最短路径 -- Bellman-Ford算法1.算法思想2.算法实现3.SPFA优化4.负权回路 四、多源最短路径 -- Floyd-Warshall算法1.算法思想2.算法实现 一、最短路…

python笔记_数据类型

定义:python的变量在使用前必须赋值,数据类型指的是变量指定的内存数据的类型 string字符串类型使用引号int整型整数float浮点型小数bool布尔值(逻辑)输出true/false A,整数类型 整型字节 1,python的整数有十六进制,十进制&#…

HDSRNet | 入局图像超分,异构动态卷积玩出新花样~

首发AIWalker,欢迎关注~ https://arxiv.org/abs/2402.15704 https://github.com/hellloxiaotian/HDSRNet 卷积神经网络可以通过深度网络架构和给定的输入样本自动学习特征。然而,所获得的模型的鲁棒性在不同的场景中可能具有挑战性。网络架构的差异越大…

基于C#开发OPC DA客户端——基于OPCDAAuto

OPC DA OPC DA(OPC Data Access),即OPC数据访问接口,定义了数据交换的规范,包括:过程值、更新时间、数据品质等信息。 自动化接口中共定义了6类对象:OPCServer对象、OPCBrowser对象、OPCGroups对象、OPCGroup对象、O…

《最新出炉》系列初窥篇-Python+Playwright自动化测试-34-处理https 安全问题或者非信任站点-下篇

1.简介 这一篇宏哥主要介绍playwright如何在IE、Chrome和Firefox三个浏览器上处理不信任证书的情况,我们知道,有些网站打开是弹窗,SSL证书不可信任,但是你可以点击高级选项,继续打开不安全的链接。举例来说&#xff0c…

运用JProfiler分析Java程序中的OOM问题

前言 在Java开发过程中,内存管理是一项至关重要的任务。作为开发者,我们时常会遇到一个让人头疼的问题——Java堆空间溢出(OutOfMemoryError,简称OOM)。当程序试图分配超出Java虚拟机(JVM)堆大…

解决error: the following arguments are required问题

今天在运行代码的时候,文件报错如下: mcts.py: error: the following arguments are required: --num_sims, --levels 根据报错信息可以看出这应该是说--num_sims和--levels两个属性并没有定义,但在代码中找了许久,不知道要在哪里…

LeetCode238题:除自身以外数组的乘积(python3)

代码思路: 当前位置的结果就是它左部分的乘积再乘以它右部分的乘积,因此需要进行两次遍历,第一次遍历求左部分乘积,第二次遍历求右部分的乘积,再将最后的计算结果一起求出来。 class Solution:def productExceptSelf(…

外包干了7个月,技术退步明显.......

先说一下自己的情况,大专生,18年通过校招进入北京某软件公司,干了接近4年的功能测试,今年年初,感觉自己不能够在这样下去了,长时间呆在一个舒适的环境会让一个人堕落! 而我已经在一个企业干了四年的功能测…

上位机图像处理和嵌入式模块部署(当前机器视觉新形态)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing 163.com】 过去的机器视觉处理,大部分都是集中在上位机、或者是服务器领域,这种形式维持了很长的时间。这种业务形态下,无…

如何将一台电脑主机分裂成两台、三台?

有用户问:如何将一台电脑主机拆分成两台、三台甚至更多台使用? 这是什么意思? 简单解释一下:在一台计算机主机上,连接两台、三台或者更多台显示器,然后将这台主机的硬件资源分配给这些显示器,然…

Tomcat -2

1. 动静分离 ① 单机反向代理 7-2 代理服务器 7-5 tomcat 设置 7-3 测试: 代理服务器那里写什么就显示什么

外泌体相关基因肝癌临床模型预测——2-3分纯生信文章复现——02.数据格式整理(2)

内容如下: 1.外泌体和肝癌TCGA数据下载 2.数据格式整理 3.差异表达基因筛选 4.预后相关外泌体基因确定 5.拷贝数变异及突变图谱 6.外泌体基因功能注释 7.LASSO回归筛选外泌体预后模型 8.预后模型验证 9.预后模型鲁棒性分析 10.独立预后因素分析及与临床的…

【论文笔记】Improving Language Understanding by Generative Pre-Training

Improving Language Understanding by Generative Pre-Training 文章目录 Improving Language Understanding by Generative Pre-TrainingAbstract1 Introduction2 Related WorkSemi-supervised learning for NLPUnsupervised pre-trainingAuxiliary training objectives 3 Fra…

AttributeError: ‘list‘ object has no attribute ‘view‘

问题描述 训练yolov9的时候遇到了下面的问题。 In loss_tal.py: pred_distri, pred_scores torch.cat([xi.view(feats[0].shape[0], self.no, -1) for xi in feats], 2).split( (self.reg_max * 4, self.nc), 1) The error is as follows: AttributeError: list …

rtt的io设备框架面向对象学习-touch设备

目录 1.触摸设备基类2.触摸设备基类的子类3.初始化/构造流程3.1设备驱动层3.2 设备驱动框架层3.3 设备io管理层 4.总结5.使用5.1实例 1.触摸设备基类 此层处于设备驱动框架层。此层的类是抽象类。 在/ components / drivers / include / drivers /touch.h定义了如下touch设备…