# 基本用法
使用 Vue.js 和 vue-router 創建單頁應用非常的簡單,使用 Vue.js 開發,整個應用已經被拆分成了獨立的組件。在使用 vue-router 時,我們需要做的就是把路由映射到各個組件,vue-router 會把各個組件渲染到正確的地方。下面是個簡單的例子:
### HTML
``` html
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用指令 v-link 進行導航。 -->
<a v-link="{ path: '/foo' }">Go to Foo</a>
<a v-link="{ path: '/bar' }">Go to Bar</a>
</p>
<!-- 路由外鏈 -->
<router-view></router-view>
</div>
```
### JavaScript
``` js
// 定義組件
var Foo = Vue.extend({
template: '<p>This is foo!</p>'
})
var Bar = Vue.extend({
template: '<p>This is bar!</p>'
})
// 路由器需要一個根組件。
// 出于演示的目的,這里使用一個空的組件,直接使用 HTML 作為應用的模板
var App = Vue.extend({})
// 創建一個路由器實例
// 創建實例時可以傳入配置參數進行定制,為保持簡單,這里使用默認配置
var router = new VueRouter()
// 定義路由規則
// 每條路由規則應該映射到一個組件。這里的“組件”可以是一個使用 Vue.extend
// 創建的組件構造函數,也可以是一個組件選項對象。
// 稍后我們會講解嵌套路由
router.map({
'/foo': {
component: Foo
},
'/bar': {
component: Bar
}
})
// 現在我們可以啟動應用了!
// 路由器會創建一個 App 實例,并且掛載到選擇符 #app 匹配的元素上。
router.start(App, '#app')
```
查看示例應用 [在線](http://jsfiddle.net/yyx990803/xyu276sa/).
- vue
- 官方教程
- 起步
- 安裝
- 概述
- Vue 實例
- Class 與 Style 綁定
- 數據綁定語法
- 條件渲染
- 列表渲染
- 表單控件綁定
- 組件
- 計算屬性
- 自定義指令
- 自定義過濾器
- 方法與事件處理器
- 混合
- 插件
- 過渡
- 深入響應式原理
- 對比其它框架
- 構建大型應用
- API
- vue-router
- 安裝
- 基本用法
- 嵌套路由
- 路由對象和路由匹配
- 具名路徑
- 路由配置項
- router-view
- v-link
- 切換控制流水線
- 切換鉤子函數
- data
- activate
- deactivate
- canActivate
- canDeactivate
- canReuse
- API
- 路由實例屬性
- router.start
- router.stop
- router.map
- router.on
- router.go
- router.replace
- router.redirect
- router.alias
- router.beforeEach
- router.afterEach
- 文章
- VUE.JS: A (RE)INTRODUCTION
- 源碼
- 表單控件綁定