目标：学习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的基本用法就是这些，可以对付一阵了。
还有一些高级内容，以后再说，本章完
网友评论