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