美文网首页全栈记跨域
10 Vue路由、http请求、跨域请求fetch/axios/

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

作者: 官清岁月 | 来源:发表于2019-05-13 08:32 被阅读0次

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

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

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

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

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

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

    相关文章

      网友评论

        本文标题:10 Vue路由、http请求、跨域请求fetch/axios/

        本文链接:https://www.haomeiwen.com/subject/wjzndqtx.html