vue-router工作原理：hash模式和history模式介绍

vue-router是Vue官方推出的路由管理器，主要用于管理URL，实现URL和组件的对应，以及通过URL进行组件之间的切换，从而使构建单页面应用变得更加简单。

vue-router的工作原理

单页面应用(SPA)的核心思想之一，就是更新视图而不重新请求页面，简单来说，它在加载页面时，不会加载整个页面，只会更新某个指定的容器中的内容。对于大多数单页面应用，都推荐使用官方支持的vue-router。

在实现单页面前端路由时，提供了两种方式，分别是hash模式和history模式，根据mode参数来决定采用哪一种方式。

1. hash模式

vue-router默认为hash模式，使用URL的hash来模拟一个完整的URL，当URL改变时，页面不会重新加载。#就是hash符号，中文名为哈希符或者锚点，在hash符号后的值称为hash值。

路由的hash模式是利用了window 可以监听onhashchange事件来实现的，也就是说hash值是用来指导浏览器动作的，对服务器没有影响，HTTP请求中也不会包括hash值，同时每一次改变hash值，都会在浏览器的访问历史中增加一个记录，使用“后退”按钮，就可以回到上一个位置。所以，hash模式是根据hash值来发生改变，根据不同的值，渲染指定DOM位置的不同数据。

2. history模式

hash模式的URL中会自带#号，影响URL的美观，而history模式不会出现#号，这种模式充分利用了history.pushState()来完成URL的跳转，而且无须重新加载页面。使用history模式时，需要在路由规则配置中增加mode:'history'，实例代码如下：

提示：

// main.js 文件
const router = new VueRouter ({
    mode:'history',
    routes: [...]
})

HTML5中history有两个新增的API，分别是history.pushState()和history.replaceState(),它们都接收3个参数，即状态对象(state object)、标题(title)和地址(URL)。下面我们就简单介绍这3个参数的含义。

(1)状态对象(state object)：一个JavaScript对象，与用pushState()方法创建的新历史记录条目关联。

(2)标题(title)：FireFox浏览器目前会忽略该参数。为了安全性考虑，建议传一个空字符串。或者也可以传入一个简短的标题，标明将要进入的状态。

(3)地址(URL)：新的历史记录条目的地址。

猜你喜欢：

vue组件三大部分： template、script、style

Vue生命周期总共分为几个阶段?

vue全家桶是指什么？有哪些东西？

传智教育前端开发培训课程