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