黑马程序员技术交流社区

标题: 【上海校区】 vue-router实现原理 [打印本页]

---

作者: 依惜    时间: 2020-4-29 11:09
标题: 【上海校区】 vue-router实现原理
                                               vue-router实现原理

1.原理核心就是 更新视图但不重新请求页面。
vue-router实现单页面路由跳转，提供了三种方式：hash模式、history模式、abstract模式，根据mode参数来决定采用哪一种方式。
2.vue-router 提供了三种路由运行模式：
  hash: 使用 URL hash 值来作路由。默认模式。
  history: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。
  abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端
Hash模式
hash即浏览器url中#后面的内容，包含#。hash是URL中的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会加载相应位置的内容，不会重新加载页面。
也就是说即#是用来指导浏览器动作的，对服务器端完全无用，HTTP请求中，不包含#。每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置。
所以说Hash模式通过锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据。
History模式
HTML5 History API提供了一种功能，能让开发人员在不刷新整个页面的情况下修改站点的URL，就是利用 history.pushState API 来完成 URL 跳转而无须重新加载页面；
由于hash模式会在url中自带#，如果不想要很丑的 hash，我们可以用路由的 history 模式，只需要在配置路由规则时，加入"mode: 'history'",这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2