1使用

1. 导入 vue 和 vue-router

import Vue from 'vue'
import VueRouter from 'vue-router'

2. 导入相关组件

import Foo from './Foo'
import Bar from './Bar'

3. Vue.use(VueRouter)

4. 定义路由

每个路由应该映射一个组件，其中component可以是通过Vue.extend() 创建的组件构造器或一个组件配置对象

const routes = [
  {
    path: '/foo', component: Foo,
    path: '/bar', component: Bar
  }
]

5. 创建router是实例，然后传routes配置

const router = new VueRouter({
  routes
})

6. 创建和挂载根实例

const app = new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

---

在 单文件中

<template>
  <div id="app">
    <p>
      <router-link to="/foo">foo</router-link>
      <router-link to="/bar">bar</router-link>
    </p>
    <!-- 路由出口，路由匹配到的组件将渲染到这里 -->
    <router-view></router-view>
  </div>
</template>