目标：学习Router基本用法，实现多页面跳转

前面4章，我们学习了不少内容，表格、下拉框、弹出消息，多语言等，

参考element的文档，我们现在已经可以干不少事情了。

但是，有个小小的问题，就是我们目前做的功能，都限制在一个页面之内，这显然是不行的，太不高大上了。

今天我们再花个七八分钟，学习一下如何做多页面

vue框架里面，页面跳转是用router来实现的，功能类似于普通html里面的<a href="xxx">标签

只是html里面是整个页面跳转，而vue是单页应用，页面的跳转是在本页面内部进行的

这些抽象的概念先不要细看，实际操作一下更好理解。

有一个需要注意的，就是Router是属于Vue框架的，不是element的一个控件

所以在element官网找不到使用文档。在这里：https://router.vuejs.org/zh/

我们按此文档先安装下，执行cnpm install vue-router

一个稍微大点的网站，可能会有几十甚至上百个页面，每个页面都有router的定义,会比较复杂

所以我们最好新建一个js文件来管理router，而不是简单的加在main.js里面

在src目录下新建router目录，并创建index.js文件，内容如下

（写法参考了 https://router.vuejs.org/zh/guide/#javascript）

这里我们定义了两个路由，指向登录页和主页（现在还没有）

现在创建这两个文件，最最简单的填点东西

然后我们在main.js里面导入router/index.js这个文件，修改内容如下

我们还需要修改下App.vue这个入口文件，里面只放一个<router-view />,别的都不要。

修改之前，可以把这个文件做个备份，前面也是费了点劲才做出来的，不要浪费了。

现在看看页面，好了，默认地址变成空白了（现在App.vue里面啥也没有）

但是在地址后面加上login和home，可以看到东西，说明路由起作用了

ok，我们已经实现了router最基本的内容

现在稍微改进一下，在Home和Login这两个文件里分别都加上一个跳转链接

看看效果，可以自由跳转，高级了！

回过头我们再来解决一个小问题，就是网站的默认页面，变成空白的问题

在router/index.js里加这么一行，把默认页面跳转到登录页

（这行代码参考了https://router.vuejs.org/zh/guide/essentials/redirect-and-alias.html）

现在重新访问 http://localhost:8080试试，自动跳转了。

现在我们可以做很多页面，并且实现自由跳转了，very good！

但是本章结束之前，我们还需要学习一个内容，就是页面跳转的时候带上参数

参考https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html

试一下，添加一个用户页

router/index.js里面，添加路由设置，注意 :/userId这个写法

在Home.vue里面加两个链接

试一下页面效果

通过传参，我们可以在一个路由（页面）里显示多个用户的信息，很方便！

router的基本用法就是这些，可以对付一阵了。

还有一些高级内容，以后再说，本章完