(一、v-router起步)

v-router起步

（1.）什么是路由

• 1.后端路由：对于普通网站，所有超链接都是url地址，所有的url地址都对应服务器上对应的资源，这个对应关系就是后端中的路由。
• 2.前端路由：对于单页面应用程序来说，主要通过URL中的hash（#号）来实现不同页面的切换，同时，hash有个特点：http请求中不会包含hash相关的内容，所以，单页面程序中的页面跳转主要用hash来实现。
• 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由） #后的内容称为哈希（Hash）

相关参考：

• （1）vue路由（什么是路由）
• （2）理解web路由

（2）vue router介绍

• （2.1）vue Router：是vue.js官方的路由管理器。
• （2.2）vue Router + Vue.js创建单页应用，vue Router 作用：将组件映射到路由（routes）,然后告诉vue Router在哪里渲染它们。

（3）vue-router实现原理

vue-router在实现单页面前端路由时，提供了两种方式：Hash模式和History模式。根据mode参数来决定采用哪种方式。

• （1）Hash模式：
  • vue-router默认hash模式——使用url的hash来模拟一个完整的url，当url改变时页面不会重新加载。hash（#）是url的锚点，单改变#后面的部分，不会重新加载网页，hash出现在url中但不会包含在http请求中，对后端完全没有影响。hash模式原理是onhashchange事件（监测hash值变化），可在window对象上监听这个事件。
• （2.）History模式：
  • 由于hash模式在url中自带#，不想要很丑的hash，可以用路由的history模式，只需在配置路由规则时，加入"mode: 'history' "，这种模式充分利用了新增的pushState()和replaceState()方法。这两个方法应用于浏览器记录栈，它们提供了对历史记录修改的功能。只是在执行修改时，虽然改变了当前的url，但浏览器不会立即向后端发送请求。

（4）使用路由模块来实现页面跳转的方式

• 方式1：直接修改地址栏
• 方式2：this.$router.push("路由地址")
• 方式3：<router-link to="路由地址"></router-link>

（5）详细参考：从头开始学习vue-router