013.Vue-Router

Posted 2021-07-22 Ruovan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了013.Vue-Router相关的知识，希望对你有一定的参考价值。

01. 基本概念

Vue-router：即SPA（单页应用）的路径管理器，
根据不同的用户URL请求，返回不同的内容
vue-router是 Vue 官方的路由插件，它和 vue.js 是深度集成的，适合用于构建单页面应用
- vue的单页面应用是基于路由和组件的
  - 路由用于设定访问路径，并将路径和组件映射

SPA(single page application)：单一页面应用程序，只有一个完整的页面
- 它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容
- 单页面应用的核心之一是：更新视图而不重新请求页面
vue-router在实现单页面前端路由时，提供了两种方式：
- Hash模式和History模式
根据mode参数来决定采用哪一种方式
```
const router = new VueRouter({
   mode: 'history', // 如果这里不写,路由默认为 hash模式
   routes: [...]
})
```

模式配置：vue-router 默认 hash 模式
实现原理：
- 使用 URL 的 hash 来模拟一个完整的 URL，当 URL 改变时，页面不会重新加载
- onhashchange 事件：通过这个事件来监测hash值的变化，从而更新页面的部分内容
工作方式：
- （1）hash 即 URL 中的#符号，也称为锚点，代表的是网页中的一个位置
- （2）hash 的改变，即改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页
  - 同时，每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录
  - 使用浏览器的【后退】按钮，就可以回到上一个位置
- （3）hash 出现在 URL 中，但不会被包含在 Http 请求中，仅有#符号之前的内容会被包含在请求中
  - 因此，对后端来说，即使没有做到对路由全覆盖，也不会返回404错误，且改变 hash 不会重新加载页面
最后总结：
- Hash模式就是通过锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据

由于hash模式会在URL地址中自带#，这样URL地址看上去就不是那么美观

如果不想要很丑的 hash #符号，我们可以使用 history 模式

模式配置：只需要在配置路由规则时，加入mode: 'history'
实现原理：
- 利用了html5 中新增的两个API—— pushState()、 replaceState()
- 这两个方法应用于浏览器记录栈，在当前已有的 back、forward、go 基础之上，它们提供了对历史记录修改的功能
- 通过这两个 API ，可以改变 URL 地址且不会发送请求，不需要重新加载页面
工作方式：
- （1）当你使用 history 模式时，URL正常显示，例如 http://xxx.com/user/id，没有多余的#符号
- （2）但因为没有 #号，所以当用户刷新页面之类的操作时，浏览器还是会给服务器发送请求
  - 这个实现需要服务器的支持
- （3）而且由于在发送请求时，前端的URL必须和实际请求URL一致，否则将返回404错误
  - 因此，在URL 匹配不到任何静态资源时，应该返回同一个页面（如首页）
最后总结：
- History模式就是通过pushState()方法来对浏览器的浏览记录进行修改，来达到不用请求后端来渲染的效果

History模式	Hash模式
History模式设置新的URL可以是与当前 URL 同源的任意 URL	Hash模式只可修改 `#` 后面的部分，因此只能设置与当前 URL 同文档的 URL
History模式设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中	Hash模式设置的新值必须与原来不一样才会触发操作并将记录添加到栈中
History模式通过`stateObject` 参数可以添加任意类型的数据到记录中	Hash模式只能添加短字符串
History模式的前端URL必须与后端URL一致，否则后端无法处理，将返回404错误	Hash模式即使后端没有路由，也不会返回404错误
History模式可以设置额外的`title`属性供后续使用	—

注：还有一种abstract模式，它支持所有 javascript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式.

以上是关于013.Vue-Router的主要内容，如果未能解决你的问题，请参考以下文章