我先新创建的vue脚手架中，components创建了两个文件来模拟配置vue路由。
Home.vue文件内容（↓↓↓）
<template>
<div>
<h2>我是首页</h2>
<p>我是首页内容,哈哈哈</p>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
About.vue文件内容（↓↓↓）
<template>
<div>
<h2>我是关于页</h2>
<p>我是关于内容,呵呵呵</p>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
index.js文件内容（↓↓↓）
// 配置路由相关的信息
import VueRouter from 'vue-router'
import Vue from 'vue'
import Home from '../components/Home.vue'
import About from '../components/About.vue'
//1.通过Vue.use(插件),安装插件
Vue.use(VueRouter);
// 2.创建VueRouter对象
const routes = [
// 一个映射关系就是一个对象
{
// 这里为什么是paht，不是url，因为url是由https://主机名/端口 等组成的。
path:'/home',
component:Home
},{
path:'/about',
component:About
}
]
const router = new VueRouter({
//配置路由和组件之间的映射关系
routes
})
// 3.将router对象传入到Vue实例
export default router
main.js文件内容（↓↓↓）
import Vue from 'vue'
import App from './App'
import router from './router/index'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
render: h => h(App)
})
App.vue文件内容（↓↓↓）
<template>
<div id="app">
<!-- router-link是vue注册的全局组件 -->
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>
<!-- router-view 相当于占位符，告诉vue你的组件要出现在哪里 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>
