所属分类：web前端开发
vue本身是不支持ajax请求的，但是可以利用“vue-resource”、axios等插件实现vue发送ajax请求；axios是一个基于Promise的HTTP请求客户端，用于发送请求，“vue-resource”是一个插件用于提供使用XMLHttpRequest或JSONP进行Web请求和处理响应的服务。
前端（vue）入门到精通课程：进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具：点击使用
本教程操作环境：windows10系统、Vue3版、Dell G3电脑。
vue本身不支持发送AJAX请求，需要使用vue-resource（vue1.0版本）、axios（vue2.0版本）等插件实现
axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resource进行更新和维护
vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应的服务。
当vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios，在这里大家了解一下vue-resource就可以。
vue使用axios发送AJAX请求：
首页安装并引入axios
微博登录
QQ登录npm install axios -S
登录后复制或者网上直接下载axios.min.js文件通过script src的方式进行文件的引入
<script src="js/axios.min.js"></script>
登录后复制import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios);
Vue.prototype.$axios = axios;
登录后复制1、基本使用格式
格式1：axios([options]) #这种格式直接将所有数据写在options里
格式2：axios.get(url[,options])
2、传参方式：
通过url传参
通过params选项传参
代码片段：
<p class="lgD">
<input type="text" placeholder="输入用户名" v-model="loginForm.loginName"/>
</p>
<p class="lgD">
<input type="password" placeholder="输入用户密码" v-model="loginForm.passWord"/>
</p>
<a class="register" @click="gotoRegister()">注册账号</a>
<p class="logC">
<button @click="doLogin" type="button">立即登录</button>
</p>登录后复制<script>
export default {
data:function(){
return{
none: false,
loginForm: {
loginName: '',
passWord: ''
}
}
},
methods: {
gotoRegister:function(){
this.$router.push({
name:'register'
});
},
doLogin(){
//接口 this.$axios.get(接口地址).then(function(respon){}).catch(function(error){})
let _this = this;
if (this.loginForm.loginName === '' || this.loginForm.passWord === '') {
alert('账号或密码不能为空');
} else {
this.$axios.get("/WebUserLogin",{
params:_this.loginForm
}).then(res=>{
var result = JSON.parse(res.data);
// console.log(result);
if (result.state == 'ok') {
// console.log('登陆成功');
window.sessionStorage.setItem('token', result.token) //存入token
_this.$router.push('/index');
}else{
alert('登录失败请检查用户名和密码是否正确');
}
}).catch(error => {
alert('账号或密码错误');
// console.log(error);
});
}
}
}
}
</script>登录后复制格式：axios.post(url,data,[options]) 或者 axios([options])
<script>
import qs from 'qs'
export default {
data:function(){
return{
none: false,
registerForm: {
LoginName: '',
LoginPassword: ''
}
}
},
methods: {
register(){
let _this = this;
if (this.registerForm.LoginName === '' || this.registerForm.LoginPassword === '') {
alert('注册信息不能空');
} else {
this.$axios({
url:"/WebUserRegist",
method:"post",
data:qs.stringify(_this.registerForm)
}).then(res=>{
var result = JSON.parse(res.data);
// console.log(result);
if (result.state == 'ok') {
alert('注册成功去登录');
_this.$router.push('/');
}else{
alert('注册失败请检查注册信息是否正确');
}
}).catch(error => {
alert('注册信息有误');
// console.log(error);
});
}
}
}
}
</script>登录后复制index.js全局守卫
router.beforeEach((to,form,next) =>{
//如果进入到的路由是登录页或者注册页面，则正常展示
if (to.path === '/login') {
next();
} else {
let token = window.sessionStorage.getItem('token');
// console.log(token)
if (token === null || token === '') {
next('/login');
// alert("还没有登录，请先登录！");
} else {
next();
}
}
// console.log(to)
})登录后复制【相关推荐：《vue.js教程》】
以上就是vue支持ajax吗的详细内容，更多请关注zzsucai.com其它相关文章！
