本文已参与「新人创作礼」活动,一起开启掘金创作之路。
今天继续小结一下这两天在拿到需求后,用 VUE 画页面的过程中学到的内容
路由 Router
首先我想说一下路由,最开始我都不知道路由是什么,更不清楚该怎么去用它。而之所以会对它产生如此兴趣,是因为一开始的时候这个简单的需求我给想复杂了。
需求很简单,就是要把之前我后端返回的一个 Service--Model--Monitors 关系的一个 map 用菜单的形式展示出来。
由于原来这个模块已经有了一个项目了,是分为一个主页面,在主页面里又嵌入了另一个子页面,所以我一开始的想法是我也在写一个子页面给嵌到主页面就好了。然后偏偏我还把发请求的方法写在了主页面中,这就导致我子页面要去展示数据时,没有数据。我的数据要去主页面中获取。
出现这个现象,我就百度了“页面之间怎么传递参数”,然后就接触到了路由。
虽然上面一系列的操作着实很迷,但.........确实很迷,不过我也算了解了一下路由,也有所收获不是吗[doge]。
什么是路由?
路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源。那么url地址和真实的资源之间就有一种对应的关系,就是路由。
我的理解就是页面的跳转访问。
而 Vue 中的路由 VueRouter 是 Vue 官方提供的路由管理器,是一个功能更加强大的前端路由器。如果想要在 Vue 中使用,还是有一定的步骤的:
- 导入 js 文件
- 添加路由链接
- 添加路由占位符(最后路由展示的组件会在占位符的位置显示)
- 定义路由组件
- 配置路由规则并创建路由实例
- 将路由挂载到 Vue 实例中
这里就暂时先大致说一下 VueRouter 的概念,下一篇我会讲一下我在最开写这个极简单的需求时是怎么使用了 Router