axios:
什么是: 一个基于Promise的支持HTTP请求响应的函数库
为什么: 浏览器中向服务端发送 ajax 请求
4种发送 ajax 请求方法:
- 使用原生的xhr对象 —— 繁琐
- 使用jQuery中的$.ajax() —— 大材小用
- 旧版Vue中,Vue官方自带了Vue-resource组件,专门发送xhr请求。 —— 新版本中已经不推荐使用
- axios,官方推荐的代替Vue-resource的,专门发送ajax请求的函数库
何时:只要在Vue中发送ajax请求,都用 axios
如何: axios是一个单独的js文件,与平台无关。即可用在浏览器中,也可运行在node.js中
在浏览器中:- 下载并引入axios.min.js文件,辅助下载并引入qs.min.js。
- 调用axios函数,发起异步请求
1 | // get: |
1 | // post: |
axios的使用:
1.在main.js
中引入axios
模块,并将axios
添加到Vue类型的原型对象中:
1 | // ES6引入 |
2.坑: axios
请求默认不带cookie!导致无法使用服务器端 session。
解决: 配置axios
,让其携带 cookie :
axios.defaults.withCredentials=true
3.坑: 如果服务端采用 CORS 跨域,默认无法接受验证信息的
服务端:
1 | // 安装cors模块:npm i -save cors |
4.调用axios发送请求:
在任意.vue中: this.axios.get/post( ... )
路由组件: Vue-router
Vue-router: 是vue中专门实现单页面应用的组件
何时: 只要用vue实现单页面应用时,都用vue-router
如何: Vue核心功能中不包含Vue-router,需要下载后才能使用
1.下载并引入vue-router.js
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
2.将页面区域都定义在template中
3.<div id="#app">
中添加占位元素<router-view></router-view>
<router-view></router-view>
表示将来要被替换的区域
4.所有template,都要创建对应的组件对象
共用的template,创建全局组件
替换router-view的组件,创建局部子组件
5.建立路由字典:
1 | var routes=[ |
仅是保存对应关系的数组,即不会解析地址,也不会替换router-view
6.创建路由器对象,加载路由字典:
var router=new VueRouter({ routes })
7.创建vue示例,并载入路由器对象
new Vue({ ... router ...})
8.如何路由跳转:
- 在HTML中写死:
<router-link to="/相对路径">文本
原理: router-link用法和a几乎安全一样,因为router-link运行时会被自动翻译为a - 在Vue中用程序:
this.$router.push("/相对路径")
9.如何路由传参:
- 在接收参数的组件中:
props:[ "参数变量" ]
- 配置路由地址:
{path:"/相对路径/:变量名",component: 组件对象,props:true}
- 跳转时: 地址: /相对路径/参数值 强调: 不加:
- 获得当前路由地址对象: this.$route
this.$router
vs this.$route
- $router代表路由器,专门执行跳转任务
- $route 封装当前路径信息的对象
- this.$route.path 当前所在路径
嵌套路由:
如果一个router-view内的部分内容,也需要根据二级路径的不同,动态替换时,就用嵌套路由:
如何:
- 定义子组件模板,封装子组件对象
- 在父组件中添加
<router-view>
- 在路由字典中:
{ path: 上级路径, component: 父组件对象, children:[ { path: 上级路径+二级路径, component:子组件对象 } ]}
- 跳转:
/上级路径/二级路径
其中:/上级路径
决定根组件中router-view
的内容/二级路径
决定父组件中router-view
的内容
- 本文作者: Jambo
- 版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!