为什么需要前端路由

在前后端分离的现在，大部分应用的展示方式都变成了 SPA（单页面应用 Single Page Application）的模式。为什么会选择 SPA 呢？原因在于：

• 用户的所有操作都在同一个页面下进行，不进行页面的跳转。用户体验好。
• 对比多页面，单页面不需要多次向服务器请求加载页面（只请求一次.html文件），只需要向服务器请求数据（多亏了 ajax）。因此，浏览器不需要渲染整个页面。用户体验好。

归根结底，还是因为 SPA 能够提供更好的用户体验。

为了更好地实现 SPA，前端路由是必不可少的。假设一个场景：用户在 SPA 页面的某个状态下，点击了强制刷新按钮。如果没有前端路由记住当前状态，那么用户点击该按钮之后，就会返回到最开始的页面状态。这不是用户想要的。

当然，需要前端路由另一个点在于：我们可以更好地进行 SPA 页面的管理。通过将组件与路由发生配对关联，依据路由的层级关系，可为 SPA 内部的组件划分与管理提供一个依据参考。

Hash 路由模式 与 History 路由模式

这是两种常见的前端路由模式。

Hash 路由模式

Hash 模式使用了浏览器 URL 后缀中的#xxx部分来实现前端路由。默认情况下，URL后缀中的#xxx hash 部分是用来做网页的锚点功能的，现在前端路由看上了这个点，并对其加以利用。
比如这个 URL：http://ponent) } }) } } // 所有的插件都需要实现install 方法，传入参数是Vue的构造函数 FVueRouter.install = function(_Vue){ //将Vue的构造函数保存起来 Vue = _Vue; //实现一个混入操作的原因，插件的install阶段非常早，此时并没有Vue实例 //因此，使用mixin，延迟对应操作到Vue实例构建的过程中来执行。 Vue.mixin({ beforeCreate(){ //获取到Router的实例，并将其挂载在原型上 if(this.$options.router){ //根组件beforeCreate时只执行一次 Vue.prototype.$router = this.$options.router; this.init(); } } }) }export default FVueRouter;

这里是最为简单的一种实现。有几个值得注意的点：

• 如上代码，将最基本的一个Vue Router 的代码架子搭建起来了，能够运行。但细微处依然需要酌情考虑。
• 关于插件的写法：自定义插件内部必须实现一个 install 方法，传入参数是Vue的构造函数。
• 使用了一个新的Vue 实例，将 URL 的 hash 变量进行数据响应化处理。
• 关于渲染函数 render 的参数 h，它实际上是 createElement 函数。具体用法值得深究。代码中使用的是最为简单的处理方式。

结尾

在本文中，我们讲解了 前端路由常见的两种模式：Hash 模式与 History 模式。同时，我们尝试自己实现了一个最为简单的 Vue Router。更多相关的 Vue Router 的细节，可以参考其官网。希望本文对你有用。

到此这篇关于Vue Router的手写实现方法实现的文章就介绍到这了,更多相关Vue Router手写内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！