使用 vue.js 和 vue-router 创建单页应用非常的简单，使用 vue.js 开发，整个应用已经被拆分成了独立的组件。在使用 vue-router 时，我们需要做的就是把路由映射到各个组件，vue-router 会把各个组件渲染到正确的地方。下面是个简单的例子：

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

// 定义组件
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')

查看示例应用 在线.