Vue-router新手入门指南

我们先来看看这个需求：

有一天产品经理说需要开发一个像知乎一样的SPA，要求底部有一些按钮固定不动的底部导航栏，顶部也有一个带有返回按钮的导航栏固定不动，点击底部导航栏之后，中间部分的页面应该跳转到对应功能页面，点击顶部的返回按钮之后，应该返回到之前的页面。

如果是传统开发，你肯定第一想到的是使用css的display进行切换显示不同的vue组件（components）实现。

但是我们看到知乎底部的“我的”按钮存在一个逻辑，如果用户没有登录，那么他会跳转到登录页面，如果已经登录则显示对应页面。如果使用传统开发，那么就会显得很不优雅。

另外还要考虑一个情况，就是一般访问SPA的用户都是移动端，移动端最需要考虑的就是加载速度，并且不能耗费用户过多流量。那么就需要让用户点击这个按钮之后再加载这个组件的相关代码，以及该组件需要请求的数据，最后在渲染页面。

最后就是URL要美观漂亮，并且URL可以动态接受参数，比如说网易云音乐这个非常典型的SPA项目便使用了后端路由并且可以接受参数

http://music.163.com/#/my/m/music/playlist?id=121597667

要满足这些需求的话，在vue.js下使用vue-router是最合适不过的了。

6.vue-router都提供了什么？

1.前端路由（ 编程式导航 · GitBook）：让页面中的部分内容可以无刷新的跳转，就像原生APP一样。

2.懒加载（ 懒加载 · GitBook）：结合异步组件以及在组建的created钩子上触发获取数据的ajax请求（ 数据获取 · GitBook）可以最大化的降低加载时间，减少流量消耗。

3.重定向（ 重定向 和 别名 · GitBook）：可以实现某些需要根据特定逻辑改变页面原本路由的需求，比如说未登录状态下访问“个人信息”时应该重定向到登录页面。

4.美化URL（ HTML5 History 模式）：还记得前面网易云音乐的URL吗？

http://music.163.com/#/my/m/music/playlist?id=121597667

网易云音乐网页版的URL里面几乎都带有一个#号，大家可能会疑惑，#号是URL的hash部分，并不会传递到服务端，那么#号起什么作用呢？其实前端路由器就是通过URL的hash部分来像传统的后端路由器一样判断某些请求需要交给哪个前端组件处理。

但是大家都会觉得URL里面带一个#号太丑了，要是能像传统WEB应用一样的URL多好。这个时候vue-router提供的“HTML5 History 模式”就“完美”解决了这个问题。

为什么前面的完美要加上引号呢？

请参考官方文档：

不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。

所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个index.html 页面，这个页面就是你 app 依赖的页面。

这里还要引出另一个话题，就是为什么前端路由的时候需要改变URL呢？前面提到了WEB2.0时代是一个信息分享的时代，如果用户切换到了另一个页面，但是URL仍然显示的是index.html，那么用户想要分享这个页面给他的朋友，他的朋友访问到的则只是这个SPA的首页，并不是这个分享的用户本身希望他朋友看到的页面。因此前端路由在改变页面的时候必须让URL跟着一起变。这样同时也近似完美地解决了历史上ajax导致浏览器返回前进按钮失效的问题。

5.前置操作，中间件，过滤器，拦截器（ 导航钩子 · GitBook）

在后端路由中都有前置操作，中间件，过滤器，拦截器等概念。前端路由也可以有的，vue-router本身较为完美的支持了这些功能，让你做前端SPA开发就像后端开发一样。在第三点提到的用户未登录重定向的判断逻辑就可以写在这里。

6.路由元信息（ 路由元信息 · GitBook）：后端路由中可以对路由规则进行分组，比如说把所有需要登录才能访问的页面划分为一组。vue-router并没有路由规则分组功能，但是它提供了路由元信息，可以在元信息中定义一些规则，在路由钩子中再去判断这些规则，进行相应的操作。

7.滚动位置控制（ 滚动行为 · GitBook）：相对于官方翻译的滚动行为，我更喜欢自己将他翻译为“滚动位置控制”，官方文档对于它的作用已经讲的比较通俗易懂了，大家可以参阅官方文档学习。

总结：

有了vue-router之后，你的前端SPA项目才更像一个能够真正投入生产环境，用户体验良好的项目。结合Vue.js+Webpack全家桶，可以让你的前端开发效率以及项目的用户体验更上一层楼。如果需要对vue-router有更多了解，欢迎阅读官方文档： Introduction · GitBook

本文章由 @昌维 原创，在知乎专栏-代码之美 https://zhuanlan.zhihu.com/codes 首发，转载请注明出处。大家喜欢和支持我的文章可以点开我的头像以及专栏名称进行关注，或是点击下方的打赏按钮进行支持，谢谢。^_^