Vue3路由如何携带 # 路由模式选择

news2024/9/20 14:34:09

vue3中创建路由的时候,有两种可选模型 hash模式、HTML5模式、服务端渲染模式

createWebHashHistory(hash模式)

const router = createRouter({
  // hash模式,带 # 号
  history: createWebHashHistory(), //函数可携带参数,具体参考如下 函数使用方法:
  routes,
});

在这里插入图片描述
函数使用:

// 基于 https://example.com/folder
createWebHashHistory() // 给出一个 https://example.com/folder# 的 URL
createWebHashHistory(‘/folder/’) // 给出一个 https://example.com/folder/# 的 URL
// 如果其基础位置提供了 #,则不会被 createWebHashHistory 添加
createWebHashHistory(‘/folder/#/app/’) // 给出一个 https://example.com/folder/#/app/ 的 URL
// 你应该避免这样做,因为它改变了原始的 URL 且破坏了复制 URL 的工作
createWebHashHistory(‘/other-folder/’) // 给出一个 https://example.com/other-folder/# 的 URL
// 基于 file:///usr/etc/folder/index.html
// 对于没有 host 的位置,该 base 会被忽略
createWebHashHistory(‘/iAmIgnored’) // 给出一个 file:///usr/etc/folder/index.html# 的 URL

createWebHistory(HTML5模式)

const router = createRouter({
  // hash模式,不带 # 号
  history: createWebHistory(),
  routes,
});

在这里插入图片描述

createMemoryHistory(服务端渲染模式)

在这里插入图片描述

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

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

相关文章

C++11 容器emplace方法刨析

如果是直接插入对象 push_back()和emplace_back()没有区别但如果直接传入构造函数所需参数&#xff0c;emplace_back()会直接在容器底层构造对象&#xff0c;省去了调用拷贝构造或者移动构造的过程 class Test { public:Test(int a){cout<<"Test(int)"<<…

使用Web控制端和轻量级客户端构建的开放Web应用防火墙(OpenWAF)

目录 1. 简介2. 项目结构3. Web控制端3.1. 功能概述3.2. 审计&#xff08;攻击&#xff09;日志查看3.3. 多个WAF的集中监控和操作3.4. 使用socket进行封装3.5. 日志的高效存储和检索&#xff08;Redis&#xff09; 4. 轻量级客户端4.1. 功能概述4.2. 对Web程序的防护4.3. 网络…

36.UART(通用异步收发传输器)-RS232(3)

&#xff08;1&#xff09;串口发送模块visio视图&#xff1a; &#xff08;2&#xff09;串口发送模块Verilog代码: /* 常见波特率&#xff1a; 4800、9600、14400、115200 在系统时钟为50MHz时&#xff0c;对应计数为&#xff1a; (1/4800) * 10^9 /20 -1 10416 …

鸿蒙语言基础类库:【@system.vibrator (振动)】

振动 说明&#xff1a; 本模块首批接口从API version 4开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。从API Version 8开始&#xff0c;该接口不再维护&#xff0c;推荐使用新接口[ohos.vibrator]。该功能使用需要对应硬件支持&#xff0c;仅支持…

学生信息管理系统-优化版

springbootthymeleafmybatis 记录一下闲来无事&#xff0c;将之前做的1.0页面优化。 一、【管理员】首页 1、增加了【批量删除】、【导出学生信息】、【分页】、【统计及格率、平均分、优秀率】等功能。 2、将页面样式优化了一下&#xff0c;做的好看些 原来&#xff1a; 现…

.NET C# 配置 Options

.NET C# 配置 Options 使用 options 模式可以带来许多好处&#xff0c;包括清晰的配置管理、类型安全、易于测试和灵活性。但在使用过程中&#xff0c;也需要注意配置复杂性、性能开销和依赖框架等问题。通过合理设计和使用&#xff0c;可以充分发挥 options 模式的优势&#…

【链表】算法题(二) ----- 力扣/牛客

一、链表的回文结构 思路&#xff1a; 找到链表的中间节点&#xff0c;然后逆置链表的后半部分&#xff0c;再一一遍历链表的前半部分和后半部分&#xff0c;判断是是否为回文结构。 快慢指针找到链表的中间节点 slow指针指向的就是中间节点 逆置链表后半部分 逆置链表后半部分…

【JavaScript 算法】图的遍历:理解图的结构

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 一、深度优先搜索&#xff08;DFS&#xff09;深度优先搜索的步骤深度优先搜索的JavaScript实现 二、广度优先搜索&#xff08;BFS&#xff09;广度优先搜索的步骤 三、应用场景四、总结 图的遍历是图论中的基本操作之一&am…

安卓 mvp 的架构的详细介绍

MVP 架构介绍 MVP&#xff08;Model-View-Presenter&#xff09;是一种软件架构模式&#xff0c;常用于构建用户界面&#xff08;UI&#xff09;。它将应用程序的逻辑划分为三个部分&#xff1a;Model、View 和 Presenter。MVP 的主要目标是分离视图和业务逻辑&#xff0c;使代…

ECU通讯:CAN总线仿真测试

01.ECU 在软件定义汽车的大背景下&#xff0c;几乎每一个汽车功能都需要依靠ECU&#xff08;Electronic Control Unit&#xff0c;电子控制单元&#xff09;来实现&#xff1a;有些功能靠ECU独立实现&#xff0c;有些功能则需要多个ECU联合实现。总体来说&#xff0c;ECU绝大多…

解决SonarQube中Vue项目中deep选择器报错的问题

1. 前言 当使用SonarQube对Vue项目进行代码质量审查时&#xff0c;可能会遭遇因Vue特有的deep选择器&#xff08;旨在实现样式深度穿透&#xff09;而触发的错误或警告。由于SonarQube默认并不识别这一Vue特有的语法&#xff0c;这些错误报告可能会成为审查过程中的干扰项。为了…

Mysql sql技巧与优化

1、解决mysql同时更新、查询问题 2、控制查询优化 hint 3、 优化 特定类型的查 优化 COUNT() 查询 使用 近似值 业务能接受近似值的话&#xff0c;使用explain拿到近似值 优化关联查询 优化子查询 4、优化group by和distinct 优化GROUP BY WITH ROLLUP 5、优化 limit分页 其他…

【MySQL-19】一文带你了解存储函数

前言 大家好吖&#xff0c;欢迎来到 YY 滴MySQL系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; YY的《C》专栏YY的《C11》专栏YY的《Lin…

Richteck立锜科技电源管理芯片简介及器件选择指南

一、电源管理简介 电源管理组件的选择和应用本身的电源输入和输出条件是高度关联的。 输入电源是交流或直流&#xff1f;需求的输出电压比输入电压高或是低&#xff1f;负载电流多大&#xff1f;系统是否对噪讯非常敏感&#xff1f;也许系统需要的是恒流而不是稳压 (例如 LED…

应届生软件测试面经_一名应届生的软件测试面试题目

1.你为什么选择软件测试行业 因为之前有了解软件测试这个行业&#xff0c;觉得他的发展前景很好&#xff0c; 2.根据你以前的项目经验描述一下软件开发、测试过程&#xff0c;由那些角色负责&#xff0c;你做什么 要有架构师、开发经理、测试经理、程序员、测试员。我在里面…

什么是死锁 , 以及产生的原因详细介绍

死锁 一. 什么是死锁 指的是两个或者两个以上的线程在执行的过程中由于竞争同步锁而产生的一种阻塞现象;如果没有外力的作用,他们将无法继续执行下去,这种情况称之为死锁, 通俗的说死锁产生的原因主要是由于线程的相互等待 , 导致程序无法进行下去 二. 代码阐述 这里我们写…

科技论文在线--适合练习期刊写作和快速发表科技成果论文投稿网站

中国科技论文在线这个平台可以作为练手的一个渠道&#xff0c;至少可以锻炼一下中文写作&#xff0c;或者写一些科研方向的简单综述性文章。当然&#xff0c;如果你的老师期末要求也是交一份科技论文在线的刊载证明的话&#xff0c;这篇文章可以给你提供一些经验。 中国科技论…

数据结构 - 队列(精简介绍)

文章目录 单端队列单端队列操作&#xff1a;Queue实现 双端队列双端队列操作&#xff1a;Deque实现 循环队列循环队列手动实现 优先级队列Q 不断取最大礼物并开方 单端队列 普通队列为单端队列&#xff0c;先进先出&#xff08;FIFO&#xff09; 只能从尾部插入&#xff0c;头…

jscolor 赋值input 没能引起前边色框的颜色变化

&#x1f3c6;本文收录于《CSDN问答解答》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&…

操作系统内核源码杂谈篇:临界区

临界资源&#xff0c;是指同一时刻只能由一个线程&#xff08;linux下为进程&#xff09;访问的资源&#xff0c;而临界区就是为了确保临界资源访问是单一数据流。 临界区的代码执行&#xff0c;也就是进行原子操作&#xff0c;不会被打断。 先分析RTOS的运行架构&#xff0c…