基本用法：

  <p>
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
    </p>
    <router-view></router-view>

<script>
    const Foo = { template: '<div>Hello </div>' }
    const Bar = { template: '<div>World </div>' }
    const routes = [
        { path: '/foo', component: Foo },
        { path: '/bar', component: Bar }
    ]
    const router = new VueRouter({
        routes
    })
    const app = new Vue({
        router
    }).$mount('#app')
</script>

详细用法

    <p>
        <router-link to="/">首页</router-link>
        <router-link to="/about">关于我们</router-link>
        <router-link to="/user/lin">lin</router-link>
        <router-view></router-view>
    </p>

<script>
    var routes = [
        {
            path: '/',
            component: {
                template: `
                <div>
                <h1>首页</h1>
                </div>`
            }
        },
        {
            path: '/about',
            component: {
                template: `
                <div>
                <h1>关于我们</h1>
                </div>`
            },
        },
        //传参
        {
            path: '/user/:name',
            component: {
                template: `
                <div>
                <div>我是{{$route.params.name}}</div>
               <router-link to="more" append>更多信息</router-link>
                <router-view></router-view>
                </div>`
            },
            children: [
                {
                    path: `more`,
                    component: {
                        template:
                            `
                        <div>
                        <p>
                        用户：{{$route.params.name}}的详细信息
                        时代就开始我i然后
                        </p>
                        </div>
                            `
                    },
                }
            ]
        }
    ]
    var router = new VueRouter({
        routes
    })
    var vm = new Vue({
        router
    }).$mount('#app')
</script>

在脚手架组件中使用路由：

main.js:

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import Users from './components/Users'    //引用组件
import Solts from './components/Solts'

Vue.use(VueRouter)
Vue.config.productionTip = false
const router = new VueRouter({
  mode: `history`,
  base: __dirname,
  routes: [
    {path: '/', component: Users},
    {path: '/Solts', component: Solts}
  ]
})
new Vue({
  el: '#app',
  router,
  components: {App},
  template: `
  <div id="app">
  <ul>
        <li>
                <router-link to="/">Users</router-link>
                <router-link to="Solts">Solts</router-link>
        </li>
</ul>
<router-view></router-view>   //得到视图
</div>`
})