3. 基本使用

实现原理

vue-router是前端路由，在路由切换的时候，在浏览器端判断当前路由，并加载对应的组件。
vue-router实现原理【vue2 + vue-router3】参考github仓库：https://github.com/leezozz/vue-router-project (opens new window)

Hash模式

• URL中#后面的内容作为路径地址【如果只是#后面的地址改变，不会向服务器发送请求，但是会把这个地址记录在浏览器的历史记录中】
• 监听hashchange事件
• 根据当前路由地址找到对应组件重新渲染
• 它在内部传递的实际 URL 之前使用了一个哈希字符（#）。由于这部分 URL 从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理。不过，它在 SEO 中确实有不好的影响。如果你担心这个问题，可以使用 HTML5（History） 模式。

History模式

• 通过history.pushState()方法改变地址栏
• 监听popstate事件
• 根据当前路由地址找到对应组件重新渲染

vue的active-class和exact-active-class的作用和区别

• 1. active-class: 设置 链接激活时使用的 CSS 类名
• 2. exact-active-class: 配置当链接被精确匹配的时候应该激活的 class
• 区别：router-link 默认情况下的路由是模糊匹配，例如当前路径是 /article/1 那么也会激活。所以当设置 exact-active-class 以后，这个 router-link 只有在当前路由被全包含匹配时才会被激活 exact-active-class 中的 class

<router-link to="/article" active-class="router-active"></router-link>
当用户访问 /article/1 时会被激活为：
<a href="#/article" class="router-active" rel="nofollow"></a>

<router-link to="/article" exact-active-class="router-active"></router-link>
当用户访问 /article/1 时，不会激活这个 link 的 class：
<a href="#/article" rel="nofollow"></a>

History 模式和 Hash 模式都是客户端修改 URL，所以性能相差不大

• Hash 模式，调用 push 方法会先判断当前浏览器是否支持 window.history.pushState 如果直接调用 pushState 改变地址栏，否则的话通过 window.location 改变地址栏

• 可以通过 this.$router 对象获取到当前路由对象中信息，例如：path、parmas、query 等。 this.$router 中有一个 currentRoute 属性可以用来获取当前路由信息

• 基于historyAPI的路由无法从url地址栏直接访问指定页面，这个很容易理解，因为url地址栏里输入后回车相当于发送了一次GET请求，那么不带#的路由路径就和普通的API接口是一样的，既然服务端并没有定义这样的接口，那直接访问时出现404页面就很正常了。

• 单页应用程序中，在history模式下浏览器会向服务器请求这个页面，但是服务器端并不存在这个页面于是就返回404。所以这个时候就需要给服务器端进行配置：除了静态资源以外都需要返回单页应用的index.html。