Vue-cli
build文件夹下的webpack.base.conf.js文件夹里面，设置了路由入口文件，代码如下。
详情请查看：https://www.cnblogs.com/ye-hcj/p/7082620.html
entry: { app: './src/main.js' }
src文件夹下有两个js文件需要区分下：
1、main.js是整个项目的入口文件
2、router/index.js路由文件
ps： App.vue是我们的主组件，所有页面都是在App.vue下进行切换的。
Vue-router
这里的路由就是SPA（单页应用）的路径管理器。
npm install vue-router --save-dev
如果你在使用vue-cli中已经选择安装了vue-router，那这里不需要重复安装了。
<router-view>标签
点击每个导航链接都会跳转到不同的组件，这时候我们要通过<router-view></router-view>来实现。
<router-view>标签说明使用了路由机制（通用模板的标志，用于给子模板提供插入位置）
router-view 可以当做是一个容器，它渲染的组件是使用的 vue-router 指定的。
router-link制作导航（实现基本的跳转）
<router-link to="/">[显示字段]</router-link>
to：是我们的导航路径，要填写的是你在router/index.js文件里配置的path值，如果要导航到默认首页，只需要写成 to=”/”
子路由的写法是在原有的路由配置下加入children字段, children字段后边跟的是个数组：
Children:[ {path:’/’,component:Hello}, {path:’Hi1’,component:Hi1}, {path:’Hi2’,component:Hi2} ]
在配置路由文件前，需要先用import引入Hi1和Hi2。
vue-router如何参数传递
1、通过route传参
2、通过to传参，代码如下
<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>
3、通过url传递参数
在路由配置文件index.js中以冒号的形式传递参数（需要时可搭配正则用），实现对参数的绑定。参考代码如下：
{ path:'/params/:newsId/:newsTitle', component:Params }
最后别忘了在App.vue加上链接标签哦！
ps:在文章的末尾，增加一点小知识，就是在业务逻辑代码中的页面跳转，也就是所谓的编程式导航（前进和后退），感兴趣的可以查一下下面的代码：
this.$router.go(1); this.$router.go(-1); this.$router.push(‘/’);
可以在主组件中写三个按钮，通过@click来触发实现哦。