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

news2024/11/18 3:28: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.coloradmin.cn/o/2066264.html

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

相关文章

c语言杂谈系列:模拟虚函数

从整体来看&#xff0c;笔者的做法与之前的模拟多态十分相似&#xff0c;毕竟c多态的实现与虚函数密切相关 废话少说&#xff0c;see my code&#xff1a; kernel.c#include "kernel.h" #include <stdio.h>void shape_draw(struct shape_t* obj) {/* Call dr…

气膜粮仓:卓越的抗风雪能力与高性能材料—轻空间

在粮食储存领域&#xff0c;气膜粮仓以其卓越的抗风雪能力和高性能材料成为了现代农业的首选。其独特的设计和先进的材料使其在各种极端天气条件下依然能够保证粮食的安全和品质。 强抗风雪能力&#xff0c;保障粮仓安全 气膜粮仓采用了创新的结构设计&#xff0c;能够有效抵御…

Selenium + Python 自动化测试19(补充-读取各种文件数据操作)

我们的目标是&#xff1a;按照这一套资料学习下来&#xff0c;大家可以独立完成自动化测试的任务。 上一篇我们讨论了数据驱动测试中如何完成重复的测试实例&#xff0c;今天我们补充一些读取各种文件的方法。 本篇文章我们讨论一下如何使用读取txt、CSV、Excel文件&#xff0…

burpsuite xssValidator插件(xss插件)

安装 1. 商城安装插件 2. 安装环境 Download PhantomJShttps://phantomjs.org/download.htmlGitHub - NetSPI/xssValidator: This is a burp intruder extender that is designed for automation and validation of XSS

halcon1

Halcon安装&#xff1a;halcon介绍&#xff1a; 德国MVtec公司开发的一套完善的标准的机器视觉算法包。底层功能算法多&#xff0c;运算性能快。halcon不能提供相应的界面编程需求&#xff0c;需要和vs一起才能构成一套完整软件。 软件界面 halcon数据类型 Halcon的数据类型主…

Hugo博客搭建

Hugo 构建 Hugo 安装 下载 安装包hugo version 查看是否安装成功 生成站点基础框架 进入自己指定文件夹下执行 hugo new site solejay-blog创建仓库 cd solejay-blog git init主题配置 进入 Hugo 主题页面 选择主题并下载 个人喜欢的主题&#xff1a;meme、newsroom、gal…

mac安装java17(jdk17)

1. 下载jdk17 官网下载&#xff1a;https://www.oracle.com/java/technologies/downloads 2. 直接安装 安装完后目录会存放在下面目录下 /Library/Java/JavaVirtualMachines 111111deMBP JavaVirtualMachines % ls jdk-11.0.227 jdk-17.jdk 3. 如果你已经安装过java&#…

【MobaXterm】查找输出结果的关键字

要求&#xff1a; 在MobaXterm终端的输出结果 查找关键字 解决&#xff1a; 菜单栏终端->在终端中查找 Terminal -> Find in terminal

智慧水务项目(七)vscode 远程连接ubuntu 20.04 服务器,调试pyscada,踩坑多多

一、说明 以前用过pycharm&#xff0c;远程连接还可以&#xff0c;但是vscode用以前还可以&#xff0c;就用它开发python了&#xff0c;想搞个远程&#xff0c;源码直接放服务器上&#xff0c;能远程调试&#xff0c;其实也很方便的&#xff0c;结果第一次还成功了&#xff0c;…

【机器翻译方向】数据集合集!

本文将为您介绍经典、热门的数据集&#xff0c;希望对您在选择适合的数据集时有所帮助。 1 QUAK 发布方&#xff1a; Upstage高丽大学 发布时间&#xff1a; 2022 韩英合成机器翻译质量预测数据 (韩英神经机器翻译的一个合成质量估计数据集&#xff0c;QUAK) 是指韩语句子和…

erlang学习:erlang学习:书上案例22.6练习题3

初步实现了书上案例第二&#xff0c;三问的要求&#xff0c;对输出结果有部分偏差&#xff0c;没有实现对已完成任务状态的记录&#xff0c;因此已完成任务输出无论如何都是0&#xff0c;明天会在record中加一个字段进行已完成任务状态的记录 (2) 添加一个名为job_centre:stati…

业绩回暖的小鹏,何时能够迈过月销2万的“及格线”?

古罗马哲学家塞涅卡在他的《论天命》中曾写下这么一句话&#xff1a;“英勇的士兵能够从战斗的胜利中获得喜悦&#xff0c;而伟大的人能够从逆境中得到欢乐。” 对于企业来说&#xff0c;身处逆境不一定能得到欢乐&#xff0c;但是走出逆境一定振奋人心。 8月20日&#xff0c…

【原创教程】电气电工10:接压线端子

电气电工这些知识点,我们描述的比较细,虽然看起来比较简单,但是它是后面我们技能提升的基础,如果我们后面学电气工程师相关知识,这些都属于基本功。 接着我们来看一下接线端子 一、接线端子 接线端子的介绍: 接线端子是一种用于连接电线的设备,它能够将电线的导体与…

vue3 bug记录

项目场景&#xff1a; vue2.7 使用vue的ref&#xff0c;报错 Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option. 原因分析&#xff1a; 表单组件使用了同名的ref&#xff0c;需要删掉

基于Modbus的MFC智能控制

1. 系统概述 利用LabVIEW通过Modbus 485协议实现对七星&#xff08;Sevenstar&#xff09;品牌质量流量控制器&#xff08;MFC&#xff09;的智能化控制。该系统将自动控制多个MFC的流速&#xff0c;实时监控其状态&#xff0c;并根据需要进行调整。 2. 硬件配置 MFCs: 七星品…

qt+ffmpeg报错non-existing PPS 0 referenced,如何解决???

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

LeetCode61.旋转链表

本题有两种做法&#xff1a;迭代和递归 本题的本质是&#xff1a;将链表中后k个结点变为前k个&#xff0c;然后将头结点连接到尾节点 迭代 考察知识&#xff1a; 边界条件判断链表倒k结点寻找Get思想&#xff1a;结环 /*** Definition for singly-linked list.* public cla…

基于51单片机的自动窗帘控制proteus仿真

地址&#xff1a;https://pan.baidu.com/s/1l7MGgoPD5Q58ANR1djYWow 提取码&#xff1a;1234 仿真图&#xff1a; 芯片/模块的特点&#xff1a; AT89C52/AT89C51简介&#xff1a; AT89C52/AT89C51是一款经典的8位单片机&#xff0c;是意法半导体&#xff08;STMicroelectron…

【vue3+Typescript】手撸了一个轻量uniapp导航条

最近公共组件写到导航条&#xff0c;本来打算拿已有的改。看了下uniapp市场上已有的组件&#xff0c;一是不支持vue3typescript&#xff0c;二是包装过重。索性自己手撸了一个导航条&#xff0c;不到100行代码全部搞定&#xff0c;因为自己的需求很简单&#xff1a; 1&#xf…

深度学习----------------------残差网络ResNet

目录 ResNet加更多的层总是改进精度吗&#xff1f;残差块ResNet块细节不同的残差块ResNet块ResNet架构总结 ResNet代码实现残差块输入和输出形状一致增加输出通道数的同时&#xff0c;减半输出的高和宽ResNet模型观察ResNet中不同模块的输入形状是如何变化的训练模型 问题ResNe…