Vue Router 还是看官网吧！
要想做单页面应用，就必须使用vue-router。
npm install vue-router --save
如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：
main.js
import Vue from ‘vue‘
import App from ‘./App.vue‘
import VueRouter from ‘vue-router‘
// 1.定义 (路由) 组件，可以从其他文件 import 进来
import Vcar from ‘./components/Vcar‘
import Vhouse from ‘./components/Vhouse‘
import Vfruit from ‘./components/Vfruit‘
Vue.use(VueRouter)
// 2.定义路由，每个路由应该映射一个组件。
const routes = [
{ path: ‘/car‘, component: Vcar },
{ path: ‘/house‘, component: Vhouse },
{ path: ‘/fruit‘, component: Vfruit },
]
// 3.创建 router 实例，然后传 "routes" 配置，还可以传别的配置参数
const router = new VueRouter({
routes, // 相当于 routes: routes
mode: ‘history‘,
})
new Vue({
el: ‘#app‘,
router, // 4.创建和挂载根实例，通过 router 配置参数注入路由，从而让整个应用都有路由功能
render: h => h(App)
})
通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由。
App.vue
<template>
<div id="app">
<h3>Hello App!</h3>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/car">car</router-link>
<router-link to="/house">house</router-link>
<router-link to="/fruit">fruit</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</template>
原文：https://www.cnblogs.com/onesea/p/13158872.html