如何去掉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.pushState
window.history.pushState = function (...args) {
rawPushState.apply(window.history, args)
console.log("终于监视到pushState了");
}
// 重写replaceState方法
const rawReplaceState = window.history.replaceState
window.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站一键三连哦!感谢支持!!!

【面试题】如何去掉vue的url地址中的#号?及其原理?的更多相关文章

  1. URL地址中使用中文作为的参数【转】

    原文:http://blog.csdn.net/blueheart20/article/details/43766713 引言: 在Restful类的服务设计中,经常会碰到需要在URL地址中使用中文作 ...

  2. 去除magento多店铺URL地址中的“___from_store=”

    magento 的多店铺功能,大多数情况下是根据语言来进行选择的,当添加了多店铺之后,一般情况下我们会选择开启添加store code到url地址中. Magento 自带的这种功能算是比较不错了,但 ...

  3. 解决URL地址中的中文乱码问题的办法

    解决URL地址中的中文乱码问题的办法 引言: 在Restful类的服务设计中,经常会碰到需要在URL地址中使用中文作为的参数的情况,这种情况下,一般都需要正确的设置和编码中文字符信息.乱码问题就此产生 ...

  4. URL地址中中文乱码详解(javascript中encodeURI和decodeURI方法、java.net.URLDecoder.encode、java.net.URLDecoder.decode)

    引言: 在Restful类的服务设计中,经常会碰到需要在URL地址中使用中文作为的参数的情况,这种情况下,一般都需要正确的设置和编码中文字符信息.乱码问题就此产生了,该如何解决呢?且听本文详细道来. ...

  5. JS动态获取项目名以及获取URL地址中的参数

    在项目当中我们可能会遇到例如改变的项目名称之后,相对应的地址就需要改变,为了减少工作量,将地址当中的项目名这一块写成动态获取的,那么最关键一点就是我要先获取它,再进行操作: 知识点整理,话不多说,直接 ...

  6. URL 链接中 井号#、问号?、连接符& 分别有什么作用?

    在一个 URL 中可以包含很多的内容,其中不仅仅是包含 26 个英文字母,10 个罗马数字,中文汉字,还可以拥有井号“#”.问号“?”.连接符“&”等三种最常见的符号,那么这些符号在网站中都有 ...

  7. JavaScript------获取url地址中的参数

    $(document).ready(function () { //获取地址中的参数(name是字符串) function getParameter(name) { //正则表达式 var reg = ...

  8. ipv6地址在URL中的表达方式,如何在URL地址中包含ipv6地址

    摘要 本文档定义了在WWW浏览器的URL中执行的文本IPv6地址的格式.在包括Microsoft的IE,Mozilla和Lynx等几个已经被广泛安装使用的浏览器的IPv6版本中,这种格式已经被使用.并 ...

  9. URL地址中的转义符

    如果在XML里面存储URL地址可能涉及到转义符的问题 WEB开发中通过问号(?)方式在浏览器地址栏中传值时.浏览器是通过“&”来区分问号后的参数个数的. 如果出现传值参数中带有“&”时 ...

随机推荐

  1. JS:逗号运算符

    逗号运算符: 会把逗号隔开的表达式全部执行 最后一个运行的表达式的结果就是逗号运算符的结果   例: var a = (1, 2, 3, 4, 5, 6); console.log(a); //6 隐 ...

  2. 十分钟快速实战Three.js

    前言 本文不会对Three.js几何体.材质.相机.模型.光源等概念详细讲解,会首先分成几个模块给大家快速演示一盒小案例.大家可以根据这几个模块快速了解Three.js的无限魅力.学习 我们会使用Th ...

  3. OpenAPI 3.0 规范-食用指南

    概述 OpenAPI 3.0 规范由 8 个根对象组成: openapi info servers paths components security tags externalDocs OpenAP ...

  4. 效率效率!如何使用Python读写多个sheet文件

    前言 怎么样使用Python提高自己的工作效率,今天就给大家分享这个吧. 我们经常用pandas读入读写excel文件,经常会遇到一个excel文件里存在多个sheet文件,这个时候,就需要一次性读取 ...

  5. 内存分析器 (MAT)

    内存分析器 (MAT) 1. 内存分析器 (MAT) 1.1   MAT介绍 MAT是Memory Analyzer tool的缩写.指分析工具. 1.2   MAT作用 Eclipse Memory ...

  6. 零基础学Java(4)字符串

    字符串 从概念上讲,Java字符串就是Unicode字符序列.例如,字符串"Java\u2122"由5个Unicode字符J.a.v.a和组成.Java没有内置的字符串类型,而是在 ...

  7. gnet: 一个轻量级且高性能的 Go 网络框架 使用笔记

    一个偶然的机会接触到了golang,被它的高并发传说所吸引,就开始学这门语言,越学感觉越有意思^_^ 注册了博客园这么多年,第一次写东西,年纪大了,脑子不好使了,就得写下来,记下来,为了自己以后查阅, ...

  8. Mybatis-Generator 自定义注释

    继承DefaultCommentGenerator 或者CommentGenerator package com.zhianchen.mysqlremark.toword.config;import ...

  9. EfficientFormer:轻量化ViT Backbone

    论文:<EfficientFormer: Vision Transformers at MobileNet Speed > Vision Transformers (ViT) 在计算机视觉 ...

  10. Tampermonkey究竟有什么用?

    以具体应用实例加以说明. 目标:在youtube页面上观看视频,发现喜欢的视频,单击按钮就可以下载视频. 但是,youtube页面并未提供这样的按钮及其功能. 实现思路:在浏览器下载youtube页面 ...