一.路由
A. 什么是路由？
- 在以前，我们实现网页与网页跳转使用的是a标签，给href提供网络地址或路径的话，可以跳转到相应的页面去。
- 路由与a标签实现的功能是一样的，也是实现页面的跳转，但性能更好。
- 点击a标签，每次点击都要发送网络请求，页面是不停的刷新的。
- 但，使用路由机制，点击之后不会实现请求和页面刷新，直接可以跳转的目标位置去。
B. 语法与操作
1. 安装路由模块
命令行中输入npm install vue-router --save-dev
2. 引入路由模块
要想使用路由，要在main.js文件中引入vue-router路由模块---import VueRouter from 'vue-router'
3. 使用VueRouter路由模块
Vue.use(VueRouter)
4. 配置路由
（1）注明要使用这个路由之后，就可以在下方配置路由---const router = new VueRouter({})
（2）括号中传递对象，对象的参数是固定的。
（3）参数routes是个数组，数组里面可以拥有对应的对象。
（4）对象中的第一个参数是path，path是要路由的地址，比如下例我们的路由地址是根路径"/"
（5）对象中的第二个参数是component，如果抓到了路由的地址，需要调用一个component，component可以跳转到对应的组件地址
5. 引入目标组件
现在这个路由并不能被使用，因为找不到Home和HelloWorld组件。所以，我们引进Home和HelloWorld组件。（注意：这里HelloWorld组件已存在，Home组件还未创建）
import HelloWorld from './components/HelloWorld'
import Home from './components/Home'
6. 目标组件相关操作
（1）首先，在components文件夹下建立Home.vue组件
（2）我们要让Home.vue成为Header.vue和Footer.vue和Users.vue的父级
（3）操作Home.vue如下，然后将App.vue中的组件和import内容清除
7. 在实例化vue对象中应用路由router模块
8. <router-view></router-view>
现在可以找到路由地址“/”，也能执行Home组件，但是没有告诉系统在哪里展示这个Home组件。这里根组件是App，所以要在App.vue当中输入对应内容。<router-view></router-view>
9. 此时页面正常显示
/根路径，home路径正常显示
/helloworld路径正常显示
10. 去掉#标志mode:"history"
上图url处仔细观察会发现，有多余的#/标识，需要去掉。因为我们自己定义路由，点击实现的时候会有问题。
在配置路由时加入一个属性mode:"history"，就可以去掉了
C. 实现自定义导航
1. 在App.vue中加入<router-link to="xx">xx</router-link>
功能和a标签一致，只是点击不会每次都发送请求，刷新页面，所以项目运行速率好很多。
二.Http请求
A. 安装与引入
1. 命令行中安装vue-resource模块npm install vue-resource --save-dev
2.在main.js中引入vue-resource模块，并使用。这时就可以在当前的任意组件去使用http了
B. 应用
1. 这里介绍一个以后会经常用到的网络接口，jsonplaceholder，网址：http://jsonplaceholder.typicode.com/
2. 我们应用这个/users接口，打开后复制地址http://jsonplaceholder.typicode.com/users
3. 生命周期中的钩子函数中的created函数，代表页面加载完成之前，创造组件的钩子函数，所以我们把这个链接地址附在created函数中。在页面加载之前就拿到users中的数据。
这里请求api成功的话就可执行.then，箭头函数的data代表请求成功的话，会把数据传给data
这里的data内的body就是我们要的数组，将这个数组赋给我们自己的users数组就可使用了。this.users = data.body
4.这里我们可以看到刚刚获取的数据data.body是赋给了users空数组。之前已经建立了Users.vue和Home.vue之间的属性传值关系。所以可以正常接入users数组。
image.png
网友评论