在Vue中，通常使用Vue Router进行路由配置。
对于路由，我们可以新建一个叫做router.js的文件，然后把需要用到的将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。
router.js的配置如下：
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: function() {
return import('./pages/index.vue')
},
......
]
})
把mode配置为history可以把页面的url变得更加科学。原来的url后面会加上一个#号，而使用history则会把这个#取消。组件注册如routes里面写的一样。
注册组件之后，我们在页面中使用<router-link>进行配置，用法与<a>标签一样。然后<router-link>跳转到的页面内容，由标签<router-view>渲染出来。
我们知道，对于绝大多数网站，在进行页面跳转的时候，总是有一些组件是不会变化的。例如：Header，Footer或者Sider的部分，通常是不会变的。页面跳转的时候，只会对<router-view>对应的部分进行渲染，这样就增加了使用体验。
除了用标签点击跳转之外，我们还能在代码中进行页面的跳转。router给我们提供了三个方法：
router.push(location, onComplete?, onAbort?)
router.replace(location, onComplete?, onAbort?)
router.go(n)
其中router.push和router.replace的用法是一样的，但是router.replace不会向 history 添加新记录。router.go则是提供了前进或者后退的功能。
例子：
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
// // 在浏览器记录中前进一步
router.go(1)
最后，有的时候，我们可能需要提供单独的几个页面，与其他页面不共用组件，而其他页面依然需要共用组件，这样怎么办呢？
事实上，在注册组件的时候，我们有一个children属性，在children属性里面的组件只会在对应的组件里面渲染。例如我们有一个home，一个about-me，然后我们需要在home里面又使用两个组件tab1和tab2，那么我们只需要在home的children属性里面注册这两个组件。之后在home里面的<router-view>将渲染tab1和tab2，而不是跳转。
具体例子可以参考：
