【面试题】如何去掉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.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来监听路由变化,进而匹配不同的组件来渲染出来。
【面试题】如何去掉vue的url地址中的#号?及其原理?的更多相关文章
- URL地址中使用中文作为的参数【转】
原文:http://blog.csdn.net/blueheart20/article/details/43766713 引言: 在Restful类的服务设计中,经常会碰到需要在URL地址中使用中文作 ...
- 去除magento多店铺URL地址中的“___from_store=”
magento 的多店铺功能,大多数情况下是根据语言来进行选择的,当添加了多店铺之后,一般情况下我们会选择开启添加store code到url地址中. Magento 自带的这种功能算是比较不错了,但 ...
- 解决URL地址中的中文乱码问题的办法
解决URL地址中的中文乱码问题的办法 引言: 在Restful类的服务设计中,经常会碰到需要在URL地址中使用中文作为的参数的情况,这种情况下,一般都需要正确的设置和编码中文字符信息.乱码问题就此产生 ...
- URL地址中中文乱码详解(javascript中encodeURI和decodeURI方法、java.net.URLDecoder.encode、java.net.URLDecoder.decode)
引言: 在Restful类的服务设计中,经常会碰到需要在URL地址中使用中文作为的参数的情况,这种情况下,一般都需要正确的设置和编码中文字符信息.乱码问题就此产生了,该如何解决呢?且听本文详细道来. ...
- JS动态获取项目名以及获取URL地址中的参数
在项目当中我们可能会遇到例如改变的项目名称之后,相对应的地址就需要改变,为了减少工作量,将地址当中的项目名这一块写成动态获取的,那么最关键一点就是我要先获取它,再进行操作: 知识点整理,话不多说,直接 ...
- URL 链接中 井号#、问号?、连接符& 分别有什么作用?
在一个 URL 中可以包含很多的内容,其中不仅仅是包含 26 个英文字母,10 个罗马数字,中文汉字,还可以拥有井号“#”.问号“?”.连接符“&”等三种最常见的符号,那么这些符号在网站中都有 ...
- JavaScript------获取url地址中的参数
$(document).ready(function () { //获取地址中的参数(name是字符串) function getParameter(name) { //正则表达式 var reg = ...
- ipv6地址在URL中的表达方式,如何在URL地址中包含ipv6地址
摘要 本文档定义了在WWW浏览器的URL中执行的文本IPv6地址的格式.在包括Microsoft的IE,Mozilla和Lynx等几个已经被广泛安装使用的浏览器的IPv6版本中,这种格式已经被使用.并 ...
- URL地址中的转义符
如果在XML里面存储URL地址可能涉及到转义符的问题 WEB开发中通过问号(?)方式在浏览器地址栏中传值时.浏览器是通过“&”来区分问号后的参数个数的. 如果出现传值参数中带有“&”时 ...
随机推荐
- 【Azure 应用服务】App Service 开启了私有终结点(Private Endpoint)模式后,如何来实现公网Git部署呢?
问题描述 因为中国区的App Service对外(公网访问)需要进行ICP备案,所以很多情况下,Web应用部署到App Service后,都是通过Application Gateway(应用程序网关) ...
- ssh-修改ssh服务端口号
在启动selinux的状态下修改ssh的端口号 0.启动selinux setenforce 1 getenforce 1.修改sshd_config的Port为2234 查看2234 ...
- weiphp 插件"通用表单"BUG修改
修改文件目录 在类FormsValueController 中添加函数 // 匹配函数 //$value:字符串 //$validate_rule:正则规则 // return true:比配成功,f ...
- .NET程序配置文件操作(ini,cfg,config)
在程序开发过程中,我们一般会用到配置文件来设定一些参数.常见的配置文件格式为 ini, xml, config等. INI .ini文件,通常为初始化文件,是用来存储程序配置信息的文本文件. [Log ...
- 互联网研发效能之去哪儿网(Qunar)核心领域DevOps落地实践
本文从业务目标角度出发,确定了开源+自建模式搭建 Qunar 研发工具链整体生态:通过 APPCODE 打通工具链,流程规范化自动化:多种手段+发布门禁助力质量提升:建立应用画像确定运维最小单元,可发 ...
- 使用纯 CSS 实现超酷炫的粘性气泡效果
最近,在 CodePen 上看到这样一个非常有意思的效果: 这个效果的核心难点在于气泡的一种特殊融合效果. 其源代码在:CodePen Demo -- Goey footer,作者主要使用的是 SVG ...
- HashSet集合介绍和哈希值
HashSet集合介绍 ~java.util.Set接口 extends Collection 接口~Set接口的特点: 1.不允许存储重复的元素 2.没有索引,没有带索引的方法,也不能使用普通的fo ...
- java-数据输入,分支结构
数据输入 1.Scanner使用的基本步骤" 导包:import java.util.Scanner;(导包的动作必须出现在类定义的上边) 创建对象:Scanner sc = new Sca ...
- 【主流技术】Redis 在 Spring 框架中的实践
前言 在Java Spring 项目中,数据与远程数据库的频繁交互对服务器的内存消耗比较大,而 Redis 的特性可以有效解决这样的问题. Redis 的几个特性: Redis 以内存作为数据存储介质 ...
- 当mysql表从压缩表变成普通表会发生什么
前言 本文章做了把mysql表从压缩表过渡到普通表的实验过程,看看压缩表变成普通表会发生什么?本文针对mysql5.7和mysql8分别进行了实验. 1.什么是表压缩 在介绍压缩表变成普通表前,首先给 ...