vue 中的路由为什么 采用 hash 路由模式，而不是href超链接模式(Hypertext，Reference)？

1. vue中路由模式的种类有两种

　　1. 一种是 hash 模式。

　　2. 一种是 h5 的 history 模式。

2. hash 和 history 都是来自 bom 对象 bom 来自 window

3. window.location.hash

4. hash 是属于 window.location 这个对象，而history直接属于 window

5. window.history

6. 是因为路由模式下，当hash值发生改变，不会发生网络请求，但是href会，vue会自动监听hash 当 hash发生改变的时候，只会去更新对应的组件，不会发送网络请求。

7. history 实现路由的原理 history.pushState（） 有历史记录，会发送网络请求，采用的是栈堆。

栈内存最大的优势是：先进后出

8. 研究一个方法：通过三点去学

　　1. 要明白它是干啥的

　　2. 要知道它的参数代表是什么

　　3. 要知道返回值是什么

　　history 原理图

　　

history.back() 返回上一级 === history.go(-1)

history.forwords() === history.go(-1)

history.replaceState() 没有存储记忆的路由，不能返回

作者：晋飞翔
手机号(微信同步)：17812718961
希望本篇文章 能给正在学习 前端的朋友 或 以及工作的朋友 带来收获 不喜勿喷 如有建议 多多提议 谢谢！！！

原文地址：https://www.cnblogs.com/jinfeixiang/p/12177118.html

时间： 2024-11-06 23:21:34

vue 中的路由为什么 采用 hash 路由模式，而不是href超链接模式(Hypertext，Reference)？的相关文章

React SPA 应用 hash 路由如何使用锚点

当我们在做 SPA 应用的时候,为了兼容老的浏览器(如IE9)我们不得不放弃 HTML5 browser history api 而只能采用 hash 路由的这种形式来实现前端路由,但是因为 hash 被路由占据了,导致本来不是问题的锚点功能却成了一个不大不小的问题. 经过我自己的搜索目前有两种方式能够解决这个问题,为了能在 react 生态下面简单优雅的使用,我专门封装了一个锚点组件 react-anchor-without-hash,它使用了类似原生 a 标签的写法,并且可以支持滚动的距离和

vue中路由的使用

路由: (1)监听地址栏的变化 (2)根据地址栏的变化切换到对应的组件 使用路由: 1.创建一个vue项目:vue create routerdemo 注意:在选择插件的时候只选择babel 2.安装路由插件:npm install vue-router 3.创建路由:src下新建router.js,抛出router实例 import Vue from "vue";// 引入vue import Router from "vue-router";// 引入vue-r

vue中如何不通过路由直接获取url中的参数

前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接在url后面拼接?mid=100的方式传递参数更灵活,你不需要设置路由,只需要在url后拼接参数即可,但是这种方式就需要通过javascript获取并提取url中的参数,通过传统的方式直接在页面中获取是行不通的了,因为vue中是无法通过location.search()来获取url问号之后的内容的.

Vue中使用children实现路由的嵌套

Vue中使用children实现路由的嵌套 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=&

vue中路由按需加载的几种方式

使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import Boy from '@/components/Boy' import Girl from '@/components/Girl' 普通加载的缺点: webpack在打包的时候会把整个路由打包成一个js文件,如果页面一多,会导致这个文件非常大,加载缓慢 1.require.ensure()实现按需加载

Vue中解决路由切换，页面不更新的实用方法

前言:vue-router的切换不同于传统的页面的切换.路由之间的切换,其实就是组件之间的切换,不是真正的页面切换.这也会导致一个问题,就是引用相同组件的时候,会导致该组件无法更新,也就是我们口中的页面无法更新的问题了. 一.问题呈现 在路由中进行切换结果 这时候会发现input标签的value值并没有随着路由的改变而改变.并没有更新 二.解决方案① 给<router-view :key="key"></router-view>增加一个不同:key值,这样vue

vue中监听路由参数的变化

在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新. mounted: () =>{ this.id = this.$route.query.id; this.getdetail() } getDetail()方法中会用到this.id这个参数,在同一页面切换id的值,并不会触发vue的声明周期函数. 可以添加路由监听: watch: { $route: { handler() { this.id = this.$route.query.id; this.get

初识vue 2.0（2）：路由与组件

1,在上一篇的创建工程中,使用的的模版 webpack-simple 只是创建了一个简单的demo,并没有组件和路由功能,此次采用了webpack模版,自动生成组件和路由.^_^ 在模版初始化时,因为ESLint语法检查过于严格,可以暂时不要开启. vue init webpack myapp ? Install vue-router? Yes ? Use ESLint to lint your code? No ? Setup unit tests with Karma + Mocha? Ye

HahsRouter hash 路由

无刷新页面,切换视图,用hash 实现路由切换,本身附带history记录,简单舒服. 最近用vue,看到vue-route的路由,做单页应用切换视图真心易如反掌,分分钟爽到不行.为了加深理解其内涵原理,遂决意写一个最简单的hash 路由. 思路很简单,自己维护一个 hash route 的哈希表,通过注册路由及其处理事件,通过hashchange来触发对应事件处理,有点像观察者模式的思想,先注册,再派发. 实现方法 maps 批量注册 add 单条注册 remove 单条删除 clear 全部