# 基本用法 使用 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/).