在前面几篇文章中,我们实现了基本页面的布局,并且实现了将各个页面抽离出去,也添加了路由规则,实现了:当点击底部的图标时,能够完成页面之间的跳转。
接下来,我们继续来看**路由的重定向以及路由的声明式、编程式跳转,完成首页的数据请求**。
告诉vue router在哪里去渲染
将组件 (components) 映射到路由 (routes),然后告诉 Vue Router 在哪里渲染它们。
- 创建好项目时会自动生成一个文件 router.js,如果没有的话,执行以下步骤
cnpm / npm i vue-router -S
创建src/router.js - 构建 vue-router 的基本文件结构
一.首页请求数据——axios
问题:在哪里请求数据?
答:在src/home/index.vue文件中的钩子函数中请求
具体做法:在src/home/index.vue文件中添加如下代码,在这里我们要请求的服务器地址是https://www.daxunxun.com/douban
报错:没有axios模块
解决:编辑器终端Ctrl+C终止正在执行的项目,输入命令cnpm i axios -S,安装axios。
重新启动项目 cnpm run serve
在浏览器的console控制台上会打印出 请求成功的数据
二. 首页请求列表的数据
数据请求成功后,我们要在首页中把产品列表 进行布局
1. 添加Prolist组件
在 src/components/ 文件夹下添加文件 Prolist.vue
2. 添加Prolist组件
添加Prolist组件之后,我们要在 src/home/index.vue 中使用,
目前实现的效果是,
3. 修改Prolist组件的样式
在Prolist文件中进行修改,
修改样式后的效果为,
二 .首页请求数据并且渲染列表数据,记得修改样式
1. 父组件给子组件传值
此时,页面结构也有了,下一步要做是传值,涉及到父组件/home/index.vue 给子组件Prolist 传值
返回到 子组件Prolist中,
实现效果,
2. 修改样式
这样,请求的数据,就展示过来了,但是样式不对,发现底部的footer没有了,而且列表长度为2240px,我们要去App.vue中的style中去修改样式,并且没有滚轮
效果为,高度自适应,且包含滚轮
3. 渲染其他数据,比如图片…
样式调整,看自己需求,调整成自己喜欢的样式即可,这里不再上代码了。
4. 添加meta标签
打开 /public/index.vue,添加meta标签,解决图片加载问题
最后的效果为,
总结
至此,页面上主要的效果已经实现,接下来,我们开始做其他部分 ------->
比如说评分组件、详情页面组件、注册组件、登录组件…,接下来,我们一起继续学习吧,有问题可以在评论去留言哦,一起来解决。