【面试题系列Vue02】Vue Router 路由都有哪些模式?各模式之间有什么区别?

news/2024/10/20 18:53:48/

官方解析

Vue Router 路由有三种模式:

  1. hash 模式:使⽤ URL 中的 hash(即 # 后面的内容)来作为路由路径。
    在这种模式下,页面不会重新加载,只会更新 hash 值,并触发路由变化,从而渲染对应的组件。
  2. history 模式:使⽤ HTML5 中新增的 History API 来管理浏览历史记录,从而实现页面的前进和后退。
    在这种模式下,URL 中不会带有 # 号,而是使用真实的 URL 路径来作为路由路径。
  3. abstract 模式:在不需要基于浏览器的 API 时,可以使用这种模式。
    在这种模式下,路由器并不会监听 URL 变化,而是通过调用 router.replace 或 router.push 来进行导航。

区别:

  1. hash 模式可以兼容较⽼的浏览器,但 URL 中会带有 # 号。
  2. history 模式无需带有 # 号,更加美观,但需要后端⽀持,否则刷新页面会导致 404 错误。
  3. abstract 模式主要用于⼀些特定场景,例如在使⽤ Node.js 时,可以使用 abstract 模式来构建路由。
    ⼀般来说,如果需要⽀持较⽼的浏览器,或者不需要后端⽀持,可以使用 hash 模式;
    否则建议使用 history 模式。

一个总结

Vue Router 路由有三种模式:hash 模式、history 模式和 abstract 模式。
在这里插入图片描述
⼀般情况下,我们建议使用 history 模式,因为它对 SEO 更加友好、URL 更加规范,并且随着 HTML5 技术的普及,浏览器兼容性也不再是问题。
但是在特定场景下,如需要⽀持 IE9 及以下浏览器,或者不方便进行服务端配置时,可以选择使用 hash 模式。
而 abstract 模式则适⽤于⼀些特殊的场景,如⾮浏览器环境下的应⽤程序或者只需要使⽤编程式导航的情况。

忙里抽空更新一下~


http://www.ppmy.cn/news/1511682.html

相关文章

xss.pwnfunction-Easy

目录 Ma Spaghet 代码 payload构造 结果 Jefff 代码 payload构造 方法一 方法二 结果 方法一 方法二 Ugandan Knuckles 代码 payload构造 结果 Ricardo Milos 代码 payload构造 结果 Ah Thats Hawt 代码 payload构造 结果 Ligma 代码 payload构造 结果…

26.实现一个算法删除已排序数组中的重复元素

26. Remove Duplicates from Sorted Array 题目 给定一个已排序的数组 nums,你需要原地删除重复出现的元素,使每个元素只出现一次,并返回移除后数组的新长度。  要求不能使用另一个数组分配额外的空间,必须使用O(1)的空间复杂度来完成此操作  例1: 给定的数组为= [1…

hfs通过stunnel实现https访问

hfs通过stunnel实现https访问 REF:官方文档,有点老旧 https://blog.51cto.com/u_15015155/2554641 步骤 下载stunnel工具 download (笔者用的是windows的) 下载stunnel途中会进行本地证书的制作(也可以用openssl自定义证书),如…

局域网基础技术详解

虽然在学校学了计算机网络,但还是有些东西要自己去了解。所以这篇博客也算是学校课程和我在网上查找资料总结的一些关于局域网基础技术知识。 一、傻瓜式交换机 一种即插即用、未管理的交换机,不需人工配置的低端交换机。只提供基本的网络连接功能&#…

保研考研机试攻略:第三章——数学(2)

🍦🍦🍦感谢大家对该专栏的支持,我会继续努力学习更新的,期待大家与我共同进步,我们一起拿捏机试~~~ 目录 🧊🧊🧊3.5 素数判定 🥥例题:DreamJudg…

c#实现数据导出为PDF的方式

PdfSharp vs iTextSharp: C#中PDF导出功能比较 PdfSharp 优点 轻量级:适合简单的PDF生成任务易于学习:API相对简单,学习曲线较缓开源:提供开源版本,可自由使用和修改纯C#实现:不依赖外部库或COM组件支持…

《AI视频类工具之九——​ 腾讯智影》

一.简介 官网:腾讯智影-在线智能视频创作平台 腾讯智影是一款由深圳市腾讯计算机系统有限公司开发的云端智能视频创作工具,它集成了多种AI技术,为用户提供了丰富的视频创作和编辑功能。 二.功能介绍 视频剪辑: 用户可以上传本地视频素材,并进行剪切、拼接、裁剪等基本编…

一分钟学会Linux交换分区

华子目录 前言管理交换分区的命令mkswap命令语法常用选项(一般不会带选项)示例 swapon命令命令语法常用选项示例 swapoff命令命令语法常用选项示例 free命令命令格式与参数输出信息解释使用实例 实验1:扩展交换空间1.查看之前的交换空间2.创建…