Vue微型项目（六）—— 路由的重定向以及路由的声明式、编程式跳转

在前面几篇文章中，我们实现了基本页面的布局，并且实现了将各个页面抽离出去，也添加了路由规则，实现了：当点击底部的图标时，能够完成页面之间的跳转。

接下来，我们继续来看**路由的重定向以及路由的声明式、编程式跳转，完成首页的数据请求**。

告诉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标签，解决图片加载问题
最后的效果为，

---

总结

至此，页面上主要的效果已经实现，接下来，我们开始做其他部分 ------->

比如说评分组件、详情页面组件、注册组件、登录组件…，接下来，我们一起继续学习吧，有问题可以在评论去留言哦，一起来解决。