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.hqwc.cn/news/503326.html

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

相关文章

物联网技术助力智慧城市安全建设:构建全方位、智能化的安全防护体系

一、引言 随着城市化进程的加速和信息技术的迅猛发展,智慧城市已成为现代城市发展的重要方向。在智慧城市建设中,安全是不可或缺的一环。物联网技术的快速发展为智慧城市安全建设提供了有力支持,通过构建全方位、智能化的安全防护体系&#…

修改docker默认存储位置【高版本的docker】

一、修改docker默认存储位置 1、停服务 systemctl stop docker 2、修改/etc/docker/daemon.json添加新的dcoker路径 如"data-root": "/mnt/hdd1/docker" 3、保存后重启服务:systemctl restart docker 二、其他服务的命令 systemctl disab…

S1---FPGA硬件板级原理图实战导学

视频链接 FPGA板级实战导学01_哔哩哔哩_bilibili FPGA硬件板级原理图实战导学 【硬件电路设计的方法和技巧-哔哩哔哩】硬件电路设计的方法和技巧01_哔哩哔哩_bilibili(40min) 【高速板级硬件电路设计-哔哩哔哩】 高速板级硬件电路设计1_哔哩哔哩_bil…

Angular 由一个bug说起之四:jsonEditor使用不当造成的bug

一:问题 项目中使用了一个JSON第三方库: GitHub - josdejong/jsoneditor: A web-based tool to view, edit, format, and validate JSON 当用户编辑JSON格式的数据,查找替换时: 用户的期望结果是:$$ 被替换为$$_text&a…

用node写后端环境运行时报错Port 3000 is already in use

解决方法:关闭之前运行的3000端口,操作如下 1.WindowR输入cmd确定,打开命令面板 2.查看本机端口详情 netstat -ano|findstr "3000" 3.清除3000端口 taskkill -pid 41640 -f 最后再重新npm start即可,这里要看你自己项目中package.joson的启动命令是什…

代码随想录算法刷题训练营day29:LeetCode(491)递增子序列、LeetCode(46)全排列、LeetCode(47)全排列 II

代码随想录算法刷题训练营day29:LeetCode(491)递增子序列、LeetCode(46)全排列、LeetCode(47)全排列 II LeetCode(491)递增子序列 题目 代码 import java.util.ArrayList; import java.util.Arrays; import java.util.Collections; import java.util.HashSet; im…

1905_ARMv7-M的堆栈寄存器

1905_ARMv7-M的堆栈寄存器 全部学习汇总: g_arm_cores: ARM内核的学习笔记 (gitee.com) ARMv7-M实现了2种堆栈,分别是MSP和PSP。复位的时候默认是MSP,而当前是哪种可以通过CONTROL.SPSEL寄存器的bit来查看。 SP寄存器的最低2bit,S…

XUbuntu22.04之解决:仓库xxx没有数字签名问题(二百一十七)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏:多媒…

【脑切片图像分割】MATLAB 图像处理 源码

1. 简单图像处理 加载图像 Brain.jpg,使用直方图和颜色分割成区域这些区域有不同的颜色。 这是一个更高级的问题,有多个解决它的方法。 例如,您可以计算具有特定数字的图像的直方图(例如 16 - 32),找到直方…

ROS2体系框架

文章目录 1.ROS2的系统架构2.ROS2的编码风格3.细谈初始化和资源释放4.细谈配置文件5.ROS2的一些命令6.ROS2的核心模块6.1 通信模块6.2 功能包6.3 分布式6.4 终端命令和rqt6.5 launch6.6 TF坐标变换6.7 可视化RVIZ 1.ROS2的系统架构 开发者的工作内容一般都在应用层,…

Environment 为什么可以通过@Autowired 依赖注入?

在日常开发中,我们可能会需要使用到Environment,获得环境变量的值。如何获取Environment呢,无非就三种方式 实现EnvironmentAware 接口的 setEnvironment方法,接收传入的Evironment通过ApplicationContext 的 getEnvironment 方法…

JVM原理-基础篇

Java虚拟机(JVM, Java Virtual Machine)是运行Java应用程序的核心组件,它是一个抽象化的计算机系统模型,为Java字节码提供运行环境。JVM的主要功能包括:类加载机制、内存管理、垃圾回收、指令解释与执行、异常处理与安…