今天更新晚了点，因为刚刚去参加面试回来；不多说废话了，今天主要看的是路由，当然因为 Vue Router 本身已经可以写很多内容了，所以我倾向于把基础内容放在这里，路由单开一部分来详细看看。
1 简单路由
路由是什么呢？
在计算机领域，路由其实就是根据指定好的规则，将一类访问导向至规则对应的地址的动作。
所以网络设备当中有硬件的路由器（其实就是简化版本的计算机，搭配路由软件）；而 Vue.js 的路由，允许我们通过不同的 URL 访问不同的内容，所以原理上是一致的。
如果我们只需要非常简单的路由而不想引入一个功能完整的路由库，可以像这样动态渲染一个页面级的组件：
const 结合 HTML5 History API，就可以建立一个麻雀虽小但是五脏俱全的客户端路由器。
官方提供了一个完整的例子：vue-simple-routing-example。
2 第三方路由
如果在接触 Vue.js 之前已经使用习惯了某路由，也可以很容易的整合到 Vue 项目当中来，比如 Page.js 或者 Director 都是不错的选择，这里有个使用 Page.js 的范例：
main.js：
import routes.js（简单的路由）：
export layouts/main.vue（路由主体）：
<components/VLink.vue（链接组件）：
<pages/Home.vue（首页）：
<pages/About.vue（关于页面）：
<pages/404.vue（错误页面）：
<上面这些内容共同组成了这个简单的路由应用，效果如下：
3 官方路由
先来一段官方介绍：
Vue Router 是 Vue.js 官方的路由管理器，它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
包含的功能有：
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式，在 IE9 中自动降级
- 自定义的滚动条行为
当然这个有点太官方，其实可以看成就是 Node.js 专门提供的一个路由组件，我们可以直接拿来用就好。
用 Vue.js + Vue Router 创建单页应用，是非常简单的，使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当要把 Vue Router 添加进来的时候，我们需要做的是，将组件（components）映射到路由（routes），然后告诉 Vue Router 在哪里渲染它们。
下面是官方提供的例子：
HTML:
<JavaScript：
// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由：
// Home.vue
该文档通篇都常使用 router 实例，不过需要留意一下 this.$router 和 router 使用起来完全一样，一般使用 this.$router 的原因是我们并不想在每个独立需要封装路由的组件中都导入路由。
这里有个比较完整的例子（使用 CDN 并未使用模块化方式）：
<!DOCTYPE html>
要注意，当 <router-link> 对应的路由匹配成功，将自动设置 class 属性值 .router-link-active，可以查看 API 文档 学习更多相关内容。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
