当前位置: 首页 > news >正文

【面试题】如何去掉vue的url地址中的#号?及其原理?

如何去掉vue的url地址中的#号?及其原理?

点击打开视频讲解更加详细

如何去掉vue的url地址中的#号?

import Vue from 'vue';import VueRouter from 'vue-router';Vue.use(VueRouter)// 1. 定义一些路由
// 每个路由都需要映射到一个组件。
const routes = [{ path: '/home', component: ()=> import('../views//home.vue') },{ path: '/about', component: ()=> import('../views/about.vue') },
]const router = new VueRouter({mode: 'hash',       //默认是hash模式,url是带#号的// mode: 'history',     //history模式url不带#号routes})export default router

hash模式实现原理

hash模式主要是根据url的hash值来跳转不同的路由页面。
采用hash模式的路由模式中,url后面有一个#,#后面包括#就是此路由的hash值,hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件
vue中hash模式的原理就是通过监听hash值的变化来匹配不同的组件,进而来重新渲染视图。

优点

  • 兼容性强,兼容性达到了IE8
  • 除发送ajax和资源请求外不会发送其他多余请求
  • 改变#后的路径、不会自动刷新页面
  • 无需服务端进行配合

缺点

  • 访问路径上包含#,不美观
  • 对于需要锚点功能的需求会与当前路由机制发生冲突
  • 重定向操作时,后段无法获取url完整路径。

监听onhashchange事件案例:

src\views\home.vue

<template><div>home<button @click="handerHref">跳转</button></div>
</template>
<script>
export default {name: 'home',data(){return {} },created(){},mounted() {window.addEventListener('hashchange',this.onhashchange)},computed:{},methods:{handerHref(){window.location.href = "http://localhost:8080/#/about"},onhashchange(e){console.log(e.oldURL,'home');console.log(e.newURL);console.log(location.hash);}}
}
</script><style scoped></style>

src\views\about.vue

<template><div>about</div>
</template><script>
export default {name: 'about',data(){return {} },created(){},mounted() {window.addEventListener('hashchange',this.onhashchange)},computed:{},methods:{onhashchange(e){console.log(e.oldURL,'about');console.log(e.newURL);console.log(location.hash);}}
}
</script><style scoped></style>

history模式实现原理

优点

  • 符合url地址规范, 不需要#, 使用起来比较美观
  • 可以使用history.state获取完整的路由信息
  • 后端可以获取到完整的路由信息

缺点

  • 兼容性只到IE10
  • 改变url路径后、会重新请求资源。
  • 若访问的路由地址不存在时、会报404,需服务端配合支持重定向返回统一的404页面。

history路由中我们使用onpopstate事件函数来监听history路由的变化,但是popstate事件函数只能监听到history.go、forward、back的切换路由方式,但是它不能够监听到pushState添加历史记录(就是在页面中点击某个a标签进行跳转的方式,点击页面顺序:a->b->c,记录的历史记录中a、b、c都存在,而replaceState则不同)、replaceState(点击页面顺序:a->b->c,记录的历史记录中只有a->c,即用c代替了b记录,b记录被删除了)切换路由的方式。

监听popstate、pushState、replaceState事件案例:

src\views\home.vue

<template><div>home<button @click="handerHref">跳转</button></div>
</template>
<script>
export default {name: 'home',data(){return {} },created(){},mounted() {window.addEventListener('hashchange',this.onhashchange)},computed:{},methods:{handerHref(){window.location.href = "http://localhost:8080/#/about"},onhashchange(e){console.log(e.oldURL,'home');console.log(e.newURL);console.log(location.hash);}}
}
</script><style scoped></style>

src\views\about.vue

<template><div>about<button @click="handerBack">返回</button></div>
</template><script>
export default {name: 'about',data(){return {} },created(){},mounted() {window.addEventListener('hashchange',this.onhashchange)   //hash模式跳转页面触发onhashchange事件window.addEventListener("popstate", this.onpopstate)    //popstate事件函数只能监听到history.go、forward、back的切换路由方式,但是它不能够监听到pushState添加历史记录// 但是它不能够监听到pushState添加历史记录(就是在页面中点击某个a标签进行跳转的方式,点击页面顺序:a->b->c,记录的历史记录中a、b、c都存在,而replaceState则不同)、replaceState(点击页面顺序:a->b->c,记录的历史记录中只有a->c,即用c代替了b记录,b记录被删除了)切换路由的方式// 对于pushState、replaceState需要通过函数重写的方式进行劫持,也就是说我们重写pushState和replaceState// 但是我们一般都是pushState来跳转链接,是通过this.$router.replace()来触发;而pushState()是通过this.$router.push()来触发// 重写pushState方法const rawPushState = window.history.pushStatewindow.history.pushState = function (...args) {rawPushState.apply(window.history, args)console.log("终于监视到pushState了");}// 重写replaceState方法const rawReplaceState = window.history.replaceStatewindow.history.replaceState = function (...args) {rawReplaceState.apply(window.history, args)console.log("终于监视到replaceState了");}},computed:{},methods:{handerBack(){// window.location.reload() //刷新// window.history.go(1) //前进// window.history.go(-1) //后退// window.history.forward() //前进// window.history.back() //后退+刷新this.$router.replace('/home')},onhashchange(e){console.log(e.oldURL,'about');console.log(e.newURL);console.log(location.hash);},onpopstate(e){console.log(e,'popstate')}}
}
</script><style scoped></style>

hash和history的区别

hash模式的url后跟hash值#…,它的原理就是使用window.onHashChange来监听hash值的改变,一旦发生变化就找出此hash值所匹配的组件,进而将组件渲染到页面中。但是hash模式这种带hash值的url是非常丑的,项目中也很少用hash模式。

history模式中的url是以/user这种格式,比较常见,它的原理是通过window.onpopstate来监听路由变化,进而匹配不同的组件来渲染出来。

若对您有帮助,请点击跳转到B站一键三连哦!感谢支持!!!

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

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

VG验证码识别框架2.2 免费识别验证码

该验证码服务端&#xff0c;可以免费识别常见数字、英文混合验证码&#xff1b; 功能亮点&#xff1a;通过http请求调用dll,可以识别验证码、自定义功能、可玩性极等&#xff1b; 压缩包里面有自定义功能插件案例&#xff0c;可以定制化自己需要的功能&#xff0c;需要有易语…...

Redis对象类型编码(补充内存篇)

欢迎大家观看之前的Redis系列文章 Redis安装和配置&#xff08;Windows和Linux&#xff09;Redis原来不止五种类型啊&#xff08;含常用命令&#xff09; Redis内存模型原来是这样的啊&#xff01; Redis对象类型编码&#xff08;补充内存篇&#xff09; 深入学习Redis持久化&a…...

6_游戏框架搭建

游戏框架搭建 目标 —— 使用 面相对象 设计 飞机大战游戏类 目标 明确主程序职责实现主程序类准备游戏精灵组 01. 明确主程序职责 回顾 快速入门案例&#xff0c;一个游戏主程序的 职责 可以分为两个部分&#xff1a; 游戏初始化游戏循环 根据明确的职责&#xff0c;设计…...

vue如何实现数据双向绑定,我的阿里手淘面试经历分享,看这篇文章准没错!

前言 全网唯一一份&#xff0c;对标阿里P7年薪60w的Android高级工程师学习进阶路线&#xff08;图未完全展开&#xff0c;怕大家看不清楚&#xff09;&#xff1a; 本篇文章都会围绕这份脑图来写&#xff0c;详细的介绍你处于哪个阶段该如何进阶&#xff0c;以及年薪层次高低对…...

StringBuffer的打印引出的数组转化String问题

调试COA-Programming2时&#xff0c;发现打印StringBuffer对象会出现诸如[C16b98e56的结果。 代码大概如下 char[] CheckCode new char[...]; ... StringBuffer temp new StringBuffer(CheckCode.toString()); ... System.out.println(temp); 后来发现 toString() 方法返回…...

LeetCode练习——其他(有效的括号)

给定一个只包括 ‘(’&#xff0c;’)’&#xff0c;’{’&#xff0c;’}’&#xff0c;’[’&#xff0c;’]’ 的字符串 s &#xff0c;判断字符串是否有效。 有效字符串需满足&#xff1a; 左括号必须用相同类型的右括号闭合。 左括号必须以正确的顺序闭合。 解法一&#…...

21年了,Idea springboot打jar包发布linux还能不会吗?

一 、启动类 二、其他层类注解 controller Controller public class DashboardController {}service /impl service public interface DashboardService extends IService<Dashboard> {}impl Service public class DashboardServiceImpl extends ServiceImpl<Dashboar…...

链表求和。

分析&#xff1a; 定义三个链表&#xff0c;两个链表负责两组数据的存储&#xff0c;第三个链表负责存储结果&#xff0c;前两个链表每个对应位置上的数据相加&#xff0c;注意进位处理&#xff0c;以及如果两个链表不等长的情况。 代码实现&#xff1a; class Solution3 {pu…...

Apollo学习笔记8-imu-lidarApollo3.0手动标定

imu-lidarApollo3.0手动标定参考文档参考文档 1:https://github.com/ApolloAuto/apollo/blob/r3.0.0/docs/specs/apollo_lidar_imu_calibration_guide.md. 2:https://github.com/ApolloAuto/apollo/blob/r3.0.0/docs/specs/D-kit/Auto_Driving–Sensor_calibration_cn.md. 3:h…...

什么是服务网格(Service Mesh)

本文来说下什么是服务网格 文章目录概述概述...

《零基础安装 Oracle 数据库》RAC集群系列 ❸ 简单两步快速安装 Oracle 18C RAC 数据库

前言 很多朋友吐槽我的脚本不会用&#xff0c;看不懂&#xff0c;哎&#xff0c;一言难尽&#xff01;于是&#xff0c;我将 [vagrant virtualbox shell脚本] 组合起来&#xff0c;实现了零基础也可安装 Oracle 数据库的方式&#xff0c;我称之为 新手纯享版本&#xff0c;真…...

01_map容器_构造和赋值

map容器 自身按照key值默认排序 map中所有元素都是成对出现&#xff0c;插入数据时候要使用对组 接口&#xff1a; 判断是否为空——empty() 返回元素个数——size() 交换两个集合容器——swap() 插入——insert() (位置迭代器) 记住一种就可以了 //第一种 m.insert(…...

使用 SAP UI5 系统测试工具 UIVeri5 的一个具体例子

https://developers.sap.com/tutorials/cp-uiveri5-cap.html UIVeri5 是用于 SAPUI5 应用程序的 SAP 开源 JavaScript 测试框架。 它为您部署的应用程序驱动一个真实的浏览器并模拟真实的用户场景。 系统测试检查前端和后端&#xff0c;并确保应用程序的所有部分都能很好地协同…...

Hadoop Yarn

The fundamental idea of YARN is to split up the functionalities of resource management and job scheduling/monitoring into separate daemons. The idea is to have a global ResourceManager (RM) and per-application ApplicationMaster (AM). An application is eit...

主机系统安全之SSH防御的c语言实现

脆弱的服务器 相信好多coder们都喜欢租用一些云主机来进行建站、存储资源或者实践&#xff0c;而大多数人租用了之后应该都会选择系统裸奔。 我手里正好也有一台云主机&#xff0c;偶尔登录消遣一下。某天机缘巧合&#xff0c;登录系统查看了一下登录认证日志文件/var/log/secu…...

redis加锁、解锁

在Java中&#xff0c;关于锁我想大家都很熟悉。在并发编程中&#xff0c;我们通过锁&#xff0c;来避免由于竞争而造成的数据不一致问题。通常&#xff0c;我们以synchronized 、Lock来使用它。 但是Java中的锁&#xff0c;只能保证在同一个JVM进程内中执行。如果在分布式集群…...

atcoder arc 122 a~b题Many Formulae、Insurance

A题链接 题目大意&#xff1a;不能存在两个及两个以上的减号&#xff0c;所有满足条件的式子之和。 题目思路&#xff1a;当时考试想到一半&#xff0c;就感觉编码能力不太会&#xff0c;然后就没做&#xff0c; 首先我们定义dp[N][2]&#xff0c;这种选或不选的问题&#xff0…...

顶刊两天两篇!华中科技大学团队研究成果又登《科学》!

xx团队研究成果又登《科学》&#xff01;顶刊两天两篇&#xff01;华中科技大学团队研究成果又登《科学》&#xff01;顶刊两天两篇&#xff01;华中科技大学团队研究成果又登《科学》&#xff01; 8月19日&#xff0c;《科学》Science在线发表了华中科技大学光电信息学院/武汉…...

04_set容器_查找和统计

#include<iostream> #include<string> #include<set> using namespace std;//查找 void test01() {set<int>s1;s1.insert(10);s1.insert(30);s1.insert(20);s1.insert(40);set<int>:: iterator pos s1.find(30);if (pos ! s1.end()){cout <&…...

【MySQL】索引失效

索引失效情况 is null / is not null 结论&#xff1a; in、exists&#xff1a; 当in和exists后面跟的不是子查询的话&#xff0c;会根据数据量判断是不是走索引&#xff0c;如果全表扫描比索引快&#xff0c;就全盘扫描 当后面跟的是子查询的话&#xff0c;和 not exists、…...

学习ASP.NET Core Blazor编程系列一——综述

一、NET 6概述.NET 6 是微软统一.Net Core与.Net Framework 两大框架的第二个版本,微软在 .NET 5 中开始进行这两大框架的统一之路。.NET 6 将作为长期支持 (LTS) 版本得到三年的支持。只有Visual Studio 2022(以及更高版本)支持 .NET 6。Visual Studio 2017/2019等版本都不…...

React报错之Parameter props implicitly has an any type

正文从这开始~ 总览 当我们没有为函数组件或者类组件的props声明类型,或忘记为React安装类型声明文件时,会产生"Parameter props implicitly has an any type"错误。为了解决这个错误,在你的组件中明确地为props对象设置一个类型。安装类型文件 你首先要确定的是你…...

(WebFlux)003、多数据源R2dbc事务失效分析

一、背景 最近项目持续改造,然后把SpringMVC换成了SpringWebflux,然后把Mybatis换成了R2dbc。中间没有遇到什么问题,一切都那么的美滋滋,直到最近一个新需求的出现,打破了往日的宁静。 在对需求分析了一番后,需要引入新的数据源,那就是MongoDb。然后出现了MongoDb、Mysq…...

对Github指定类目的内容进行监控和推送

很久之前看到HACK学习呀有一个Github 安全搬运工的系列文章,个人觉得很不错,想要在自己的公众号上也做这方面的内容,内容的编辑排版相对来说比较容易,这样问题就回归到Github安全内容的获取上 这篇文章整体比较长,如果想直接使用的话可以跳转去仓库 https://github.com/Cl…...

HCNP RoutingSwitching之端口安全

什么是端口安全呢?端口安全是对端口的一种保护机制;我们知道MAC安全特性中,默认情况没有配置任何配置的端口,它能够学习很多动态MAC,并且老化时间为5分钟;即我们没有限制端口学习MAC的数量;没有限制数量这意味着只要有一个MAC帧,对应端口都会学习源MAC,即不管是伪造的…...

【C标准库】详解feof函数与EOF

创作不易,多多支持! 再说此函数之前,先来说一下EOF是什么 EOF,为End Of File的缩写,通常在文本的最后存在此字符表示资料结束。 在C语言中,或更精确地说成C标准函式库中表示文件结束符。这种以EOF作为文件结束标志的文件,必须是文本文件。在文本文件中,数据都是以字符的…...

TMC2209步进驱动芯片基本配置及使用

TMC2209是用于两相步进电机的超静音电机驱动器IC。TMC2209与许多传统驱动器以及TMC2208引脚兼容。 TRINAMICs先进的StealthChop2斩波器可确保电机无噪音运行,实现最高效率和最佳电机扭矩。其快速的电流调节和抑制共振功能组合可实现高动态运动。 StallGuard用于无传感器回原点…...

MySQL源码分析之SQL函数执行

1.MySQL中执行一条SQL的总体流程 2.SQL函数执行过程1.MySQL中执行一条SQL的总体流程 一条包含函数的SQL语句,在mysql中会经过: 客户端发送,服务器连接,语法解析,语句执行的过程。 调试源码,分析函数的具体执行过程,在客户端,执行select to_char(‘test’) from dual。 跟…...

Redis 集群模式

概述 Redis 在 3.0 之后开始支持 Cluster(集群)模式,特点如下:支持节点的自动发现:可向集群动态添加节点,并自动融入 支持 slave-master 选举和容错:多个 master 宕机后,选举出新的 master 继续工作 在线分片:当有新的节点加入时,为新节点分配 slot 空间,从其他节点…...

RestTemplate用法

RestTemplate 用法 RestTemplate简介RestTemplate 是一个同步的web http客户端请求模板工具,spring框架做的抽象模板,常见的http客户端请求工具有: JDK的HttpURLConnection apache的HttpClient 常见的 OkHttp 3.一般默认用的是:HttpURLConnection如下//底层执行引擎httpUrlco…...

成都python软件培训班

近几年Python大火&#xff0c;很多企业都在大量招聘Python开发的人才&#xff0c;对此&#xff0c;很多想要学习的Python同学不禁要问&#xff0c;成都Python零基础培训班学六个月多少钱&#xff1f;贵不贵&#xff1f;Python的前景如何呢&#xff1f;对此小编为大家解答。 成都…...

html table高度设置

被一个莫名其妙的问题耽误了好久 表格行数太多时&#xff0c;表格会自动增加高度&#xff0c;设置height、max-height、overflow都不管用 原来table的height属性代表的是高度最小值 正确解决方法&#xff1a; 用div包裹table&#xff0c;设置div的height和overflow 就能试…...

html iframe自动高度,iframe高度自适应撑开

iframe在div中如何自适应高度div中的iframe高度和宽度自适应的问题我用bootstrap布局&#xff0c;上边部分为导航菜单&#xff0c;左边为一级菜单。DIV里嵌套Iframe&#xff0c;让Iframe及DIV高度一起随内容自假设&#xff1a; Div ID为&#xff1a;A 宽度750 高度600 Iframe I…...

showModalBottomSheet高度自适应

关于showModalBottomSheet高度自适应 需求&#xff1a; 1.showModalBottomSheet根据内容大小高度自适应 2.超出最大高度&#xff08;例如屏幕的三分之二&#xff09;可以滑动 3.键盘弹出时自适应 static showBottomPop(BuildContext context) {return showModalBottomSheet(…...

解决iframe高度自适应

解决iframe高度自适应原因第一种方法第二种方法原因 iframe的高度不会随着页面高度的变化而变化&#xff0c;可能会导致页面显示不全&#xff0c;或者页面下方有空白的问题。 第一种方法 这个方式更适用于嵌套的页面&#xff0c;当嵌套多个iframe时&#xff0c;比如左侧有个…...

html 最高高度,html的height:100%;高度是多少

html的height:100%;高度是多少html设置height:100%;表示一屏高度&#xff0c;类似于100vh。未设置则根据子元素的高度来自适应高。在实际应用中&#xff0c;设置页面高度为1屏幕高度通常设置&#xff1a;html,body{height:100%;margin:0;padding:0;}可以通过案例设置来查看html…...

html页面高度和宽度,html和body元素的高度和宽度

您的html实际上完全延伸到视口的100&#xff05;高度,因为视口这里是浏览器窗口,而不是内部内容.very much content#div1 {height:300px;overflow-y:scroll;border: 1px solid black;}#div2 {height:100%;}#div3 {height:600px;}这里div1的高度为300px并且滚动.滚动内容时,只需…...

vue 动态设置div的高度_Vue 动态设置元素高度

1. Vue文件如下 let windowHeight = parseInt(window.innerHeight) export default {data() {return {windowHeight: windowHeight, autoHeight: {height: }, } }, methods: {getHeight() {this.autoHeight.height = (windowHeight - 110) + px; }, }, created() {window.addE…...

datagrid 设置表格高度

1.设置fit:0 $(function(){$("#datagrid").datagrid({singleSelect:1,nowrap:1,rownumbers:1,pagination:1,remoteSort:0,striped:1,fitColumns:1,fit:0,url:"${ctx}/manage/examine/toread/query",toolbar:"#gridtool",queryParams:null});})2.…...

监听页面高度变化_js监听屏幕的高度变化

之前用VUE写完一个聊天界面&#xff0c;对于ios的效果该优化的地方都已经优化&#xff0c;且已上线。现在因项目需要&#xff0c;在另外一个angularjsionic的框架也要写一个聊天页面&#xff0c;目前还在开发中&#xff0c;发现忘记了一些很关键的东西&#xff0c;所以先备个份…...

html 表格高度调整,elementui中el-table修改表头高度和行高度(设置最低高度)

问题描述elementui提供的el-table其实挺不错&#xff0c;不过有时候可能还需要对其进行样式的修改。官方也提供了相应的表格属性&#xff0c;方便我们去修改对应的样式&#xff0c;但是有的时候可能会少了点什么。比如&#xff1a;想要把表格的高度都尽可能设置小点&#xff0c…...

uniapp高度自适应

<script> export default { data() { return { app_height: 0 }; }, onLoad() { const _this this; uni.getSystemInfo({ success: res > { console.log(手机可用高度: res.w…...

css 获取元素高度,如何获取没有给出高度的元素的高度?

前言最近在工作中遇到了一个问题&#xff0c;某个需求需要获取元素的高度&#xff0c;就假定是div元素&#xff0c;但是呢因为div中元素的内容是不确定的&#xff0c;所以并没有给div设置高度&#xff0c;在获取高度时&#xff0c;我们首先会想到3中方法1、div.style.height;我…...

html flex 的高度,Flex布局高度撑开不足问题

上午同事问我为什么flex盒子的高度被撑开了&#xff0c;但是并没有撑开到子元素高度的和(撑开高度小于子元素高度和)。本着遇到奇怪的CSS问题就模仿重现一次问题的原则&#xff0c;于是...终于...最后发现flex布局撑开的最大高度不会大于父级flex元素设置的高度&#xff01;代码…...

jq获取页面高度_jquery常见获取高度

jquery获取文档高度和窗口高度&#xff0c;$(document).height()、$(window).height()$(document).height()&#xff1a;整个网页的文档高度$(window).height()&#xff1a;浏览器可视窗口的高度$(window).scrollTop()&#xff1a;浏览器可视窗口顶端距离网页顶端的高度(垂直偏…...

html 给div设置高度,div高度设置 DIV 高度篇

DIV 高度教程-DIV的高度设置篇如何对div设置高度呢&#xff1f;答案很简单 使用css height样式即可设置div高度。div的高度图我们要对div对象设置高度样式&#xff0c;一般分为设置固定高度&#xff0c;最小高度、最大高度、自适应高度。假如一个DIV对象的class css命名“.div-…...

前端入门--JavaScript篇

JavaScript基础 文章目录JavaScript基础JavaScript是什么JavaScript的使用方式JavaScript的运行过程JS的语法三种语言的注释输入输出JS中的变量JS中基本的数据类型number类型string字符串undefined类型null类型运算符数组数组的创建数组的使用数组新增元素函数对象之前学过了HT…...

GNSS定位中的不同高度概念及计算

文章目录高度相关的几个基本概念RTKLIB中高度设置与计算参考文献由于在GNSS定位中由多种高度表示&#xff0c;不同的高度概念很容易混淆&#xff0c;中英文对应有时候也容易搞混。因此整理了一下常用的两种高度——椭球高、正高的概念与计算&#xff0c;并且标注了对应的英文&a…...

Tuoc Luong博文

转载自盛大在线&#xff08;SDO&#xff09;CEO Tuoc在推他上的轻博客&#xff1a; 原文网址为&#xff1a; http://tuocinchina.tuita.com/ Observations of China versus Silicon Valley Companies This is the first of what I hope to be many blogs on my experiences in…...

分层架构理论基础

一、三层架构 1、什么是三层架构 三层架构&#xff08;3-tier architecture&#xff09;通常意义上的三层架构就是将整个业务应用划分为&#xff1a;表示层&#xff08;User Interface layer&#xff09;、业务逻辑层&#xff08;Business Logic Layer&#xff09;、数据访问层…...