引言
今天带大家学习一下vue-cli中的router(路由)部分。
一点简介
上面这张图片这是vue-cli的官方简介，我们看到了vuecli的很多优点与优势。他作为一个开发的脚手架，大大减少了我们程序员的开发和准备，配置的工作量。
很多初学者所陌生的可能是vue-cli的一些开发，vuecli脚手架开发应用和传统的三件套开发有很多的不同之处，比如便捷的组件开发，简单自动的配置等等。
但是很多初学者可能不知道的是：vuecli默认是一个单页面的开发。
大家可能会有些疑惑
咦？
单页面怎么开发那些复杂的网页呢？
难道只能做一些只有一个页面的简单的应用吗？
当然不是的
这里我们就引入今天学习的内容----vue-router的学习。
vue-router
我们可以在创建vue-router项目的时候去勾选vue-router这个选项。
然后去进行使用，并完成在一个页面中实现不同的效果与样式。
first
这是一个简单的Vue-cli 项目。
接下来我们做一个路由的配置，让其单页面应用也能完成复杂的页面的跳转改变。
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount('#app')
首先打开我们的main.js文件，文件内容如上。
接下来我们要使用vue-router
首先我们通过import来完成导入
import VueRouter from 'vue-router'
接下来我们来注册使用VueRouter
Vue.use(VueRouter);
两个组件的准备
我们先准备两个不同的"页面"，其实就是.vue的组件
PageA.vue组件如下：
<template>
<div>
这是页面A(PageA.vue文件)啊!!!!
</div>
</template>PageB的组件如下:
<template>
<div>
这是页面B(PageB.vue文件)啊!!!!
</div>
</template>接下来我们来配置vue-router来完成其之间的跳转。
const routers = [
{path:'/pageA',component:PageA},
{path:'/pageB',component:PageB}
]简单解释一下上述代码，path是访问的录由，后面的component是什么，当然是我们要挂载的组件啦。
什么？你问我为什么没有PageA,PageB的输入提示，
肯定是你没有导入PageA和PageB啦
import PageA from '@/components/PageA.vue';
import PageB from '@/components/PageB.vue';记得导入我们的PageA和PageB。
最后new Vue中的代码如下：
new Vue({
render: h => h(App),
router:new VueRouter({routes})
}).$mount('#app')注意，new VueRouter中的代码使用了ES标准的简化写法，更简洁优雅。
传统写法。
最后
最后我们小改一下我们的组件，引入<router-link yo="目标路由></router-link>和<router-view></router-view>容器来完成
PageA.vue
<template>
<div>
这是页面A(PageA.vue文件)啊!!!!
<router-link to="/PageB">B页面的跳转</router-link>
</div>
</template>PageB.vue
<template>
<div>
这是页面B(PageB.vue文件)啊!!!!
<router-link to="/PageA">A页面的跳转</router-link>
</div>
</template>App.vue
<template>
<div>
<router-link to="/PageA">A页面的跳转</router-link>
<router-view></router-view>
</div>
</template>最后完成，保存一下，我们可以看到效果了、
