## 官方路由
对于大多数单页面应用,都推荐使用官方支持的 [vue-router 库](https://github.com/vuejs/vue-router)。更多细节可以看 [vue-router 文档](https://router.vuejs.org/)。
## 从零开始简单的路由
如果只需要非常简单的路由而不需要引入整个路由库,可以动态渲染一个页面级的组件像这样:
``` js
const NotFound = { template: '<p>Page not found</p>' }
const Home = { template: '<p>home page</p>' }
const About = { template: '<p>about page</p>' }
const routes = {
'/': Home,
'/about': About
}
new Vue({
el: '#app',
data: {
currentRoute: window.location.pathname
},
computed: {
ViewComponent () {
return routes[this.currentRoute] || NotFound
}
},
render (h) { return h(this.ViewComponent) }
})
```
结合 HTML5 History API,你可以建立一个非常基本但功能齐全的客户端路由器。可以直接看[实例应用](https://github.com/chrisvfritz/vue-2.0-simple-routing-example)
## 整合第三方路由
如果有非常喜欢的第三方路由,如 [Page.js](https://github.com/visionmedia/page.js) 或者 [Director](https://github.com/flatiron/director),整合[很简单](https://github.com/chrisvfritz/vue-2.0-simple-routing-example/compare/master...pagejs)。这有个用了 Page.js 的[复杂示例](https://github.com/chrisvfritz/vue-2.0-simple-routing-example/tree/pagejs)。
- 写在前面
- 基础
- 安装
- 介绍
- Vue实例
- 模板语法
- 计算属性和侦听器
- Class 与 Style 绑定
- 条件渲染
- 列表渲染
- 事件处理
- 表单输入绑定
- 组件基础
- 深入了解组件
- 组件注册
- Prop
- 自定义事件
- 插槽
- 动态组件 & 异步组件
- 处理边界情况
- 过渡 & 动画
- 进入/离开 & 列表过渡
- 状态过渡
- 可复用性 & 组合
- 混入
- 自定义指令
- 渲染函数 & JSX
- 插件
- 过滤器
- 工具
- 生产环境部署
- 单文件组件
- 单元测试
- TypeScript 支持
- 规模化
- 路由
- 状态管理
- 服务端渲染
- 内在
- 深入响应式原理
- 迁移
- 从 Vue 1.x 迁移
- 从 Vue Router 0.7.x 迁移
- 从 Vuex 0.6.x 迁移到 1.0
- 更多
- 对比其他框架
- 加入 Vue.js 社区
- 开发团队