Vue进阶（八十五）：vue-router Hash模式跳转及懒加载_hash模式是先变化url再跳转路由(1)

Vue 编码基础

2.1.1. 组件规范

2.1.2. 模板中使用简单的表达式

2.1.3 指令都使用缩写形式

2.1.4 标签顺序保持一致

2.1.5 必须为 v-for 设置键值 key

2.1.6 v-show 与 v-if 选择

2.1.7 script 标签内部结构顺序

2.1.8 Vue Router 规范

Vue 项目目录规范

2.2.1 基础

2.2.2 使用 Vue-cli 脚手架

2.2.3 目录说明

2.2.4注释说明

2.2.5 其他

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

大概流程可以看成:

1. 浏览器发出请求；
2. 服务器监听到端口有请求过来,并解析url路径；
3. 根据服务器的路由配置,返回相应的信息(可以是HTML字符串、也可以是json数据、图片等等)；
4. 浏览器根据数据包的 Content-type 来决定如何解析数据；

简单来说，路由就是用来跟后端服务器进行交互的一种方式，通过不同路径来请求不同资源，请求不同的页面是路由的其中一种功能。

二、前端路由

hash模式
随着 ajax 的流行，异步数据请求交互运行在不刷新浏览器的情况下进行。而异步交互体验的更高级版本就是 SPA —— 单页应用。单页应用不仅仅是在页面交互时无刷新的，连页面跳转都是无刷新的，为了实现单页应用，所以就有了前端路由。

类似于服务端路由，前端路由实现起来其实也很简单，就是匹配不同的 url 路径，进行解析，然后动态的渲染出区域 html 内容。但是这样存在一个问题，就是 url 每次变化的时候，都会造成页面的刷新。那解决问题的思路便是在改变 url 的情况下，保证页面不刷新。在 2014 年之前，大家是通过 hash 来实现路由，url hash 就是类似于：

http://www.xxx.com/#login

这种 # 后面 hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。另外每次 hash 值的变化，还会触发hashchange 这个事件，通过这个事件我们就可以知道 hash 值发生了哪些变化。然后，我们便可以监听hashchange来实现更新页面部分内容的操作：

function matchAndUpdate () {
  // todo 匹配 hash做 dom 更新操作 
}
window.addEventListener('hashchange',matchAndUpdate )
// addEventListener() 方法用于向指定元素添加事件句柄。

Hash 方法是在路由中带有一个 #，主要原理是通过监听 # 后的 URL 路径标识符的更改而触发的浏览器 hashchange 事件，然后通过获取 location.hash 得到当前的路径标识符，再进行一些路由跳转的操作，参见 MDN

• location.href：返回完整的 URL
• location.hash：返回 URL 的锚部分
• location.pathname：返回 URL 路径名

hashchange 事件：当 location.hash 发生改变时，将触发这个事件。

比如访问一个路径 http://sherlocked93.club/base/#/page1，那么上面几个值分别为：

# http://sherlocked93.club/base/#/page1
{
  "href": "http://sherlocked93.club/base/#/page1",
  "pathname": "/base/",
  "hash": "#/page1"
}

注意： Hash 方法是利用了相当于页面锚点的功能，所以与原来的通过锚点定位来进行页面滚动定位的方式冲突，导致定位到错误的路由路径，因此需要采用别的办法。

三、vue-router 路由懒加载

懒加载：也叫延迟加载，即在需要的时候进行加载，随用随载。

懒加载的意义：像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常大，造成进入首页时，需要加载的内容过多，时间过长，会出现长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时，减少资源浪费。

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

[外链图片转存中…(img-BDmNLnJO-1715840924122)]