10 Vue路由、http请求、跨域请求fetch/axios/proxy

1、Vue路由的使用 -> 页面之间跳转其不会刷新页面 -> 单页面应用 -> 用户体验感良好

(1).安装路由模块:npm install vue-router --save-dev;然后重启 -> npm run serve;  -> main.js中引入路由模块,使用中间件,配置路由,Vue实例中使用该路由router; -> app.vue使用标签才有效果,否则配置路由失败;标签中不需写内容,写了也没效果,其就是"展示内容" -> 路由配置成功,其可通过路由进行访问;

10 Vue路由、http请求、跨域请求fetch/axios/proxy_第1张图片

(2).a标签的使用可成功跳转页面,但缺点是其会刷新页面,即使重复跳转当前页面,其也会刷新,Vue路由中提供标签,其使用的是to属性,其进行页面之间的跳转不会刷新页面;或者使用;//不加“/”也OK

10 Vue路由、http请求、跨域请求fetch/axios/proxy_第2张图片

2、Vue中http请求数据 -> 安装请求模块: npm install vue-resource --save-dev; 然后重启 -> npm run serve; -> main.js中引入请求模块,添加中间件 -> 组件中使用created钩子函数获取数据 ->后续进行数据的相关操作即可;

补充:jsonplaceholder官网提供后台数据接口(开源) -> 网址:http://jsonplaceholder.typicode.com/  学习过程中使用该接口即可,后续你也可以mock一份假数据,然后进行访问,网址:

10 Vue路由、http请求、跨域请求fetch/axios/proxy_第3张图片
10 Vue路由、http请求、跨域请求fetch/axios/proxy_第4张图片
10 Vue路由、http请求、跨域请求fetch/axios/proxy_第5张图片

3、axios: npm install axios --save-dev; 重启:npm  run serve

你可能感兴趣的:(10 Vue路由、http请求、跨域请求fetch/axios/proxy)