//HTML

<div id="app">
      <h1>Hello App!</h1>
      <p>
        <!-- 使用指令 v-link 进行导航：值是$route对象 -->
        <a v-link="{ path: '/foo' }">Go to Foo</a>
        <a v-link="{ path: '/bar' }">Go to Bar</a>
      </p>
      <!-- 路由外链 -->
      <router-view></router-view>
    </div>

//JS

    
//引入Vue.js和Vue-router.js
    var Vue = require('vue');
    var VueRouter = require('vue-router');
//单独引用时，不必写下边的语句；
    Vue.use(VueRouter);

//用Vue构建一个根组件：--------路由器需要一个根组件
    var App = Vue.extend({});
    
//创建路由器实例：--------通过配置参数定制；
    var router = new VueRouter();

//定义路由规则：--------映射；
    router.map({
        //路径为“/”，初始时就会加载；
        '/':{
            //只需传入构建组件名；-------组件不需要注册（全局/局部）；
            component: Foo 
        }
    })

//启动应用；------绑定一个App实例，并且挂载到选择器#app匹配的元素上；
    router.start(App,'#app');

嵌套路由：

//路由<router-view>嵌套在模板template中；

var Foo = Vue.extend({
  template:
    '<div class="foo">' +
      '<h2>This is Foo!</h2>' +
      '<router-view></router-view>' + // <- 嵌套的外链
    '</div>'
})

router.map({
  '/foo': {
    component: Foo,
    // 在/foo下设置一个子路由
    subRoutes: {
      '/bar': {
        // 当匹配到/foo/bar时，会在Foo's <router-view>内渲染一个Bar组件
        // 匹配不到，Foo的外链中不会渲染任何东西；
        component: Bar
      },
      '/':{
        component:'只要Foo被渲染，该模板都会被渲染'
      }
    }
  }
})