Vue页面跳转,axios,axios异步请求

Vue页面跳转(两种方法)

1.方法一(标签实现)

<router-link 
:to="{name: 'bookshelf', params: { entityId: this.entityId } }"
:class="{'flex-item-1':'flex-item-1',cur:tabs[0].isShow}" 
href="javascript:">
<span class="tabNav-ico tabNav-book"></span>
<span class="tabNav-txt">书 架</span>
</router-link>

2.方法二(this.$router.push()实现)

当this.$router.push()只有一个参数时 默认为跳转地址 最多可传两个参数 第二个参数为地址参数

<a @click="toIndex" :class="{'flex-item-1':'flex-item-1',cur:tabs[2].isShow}" href="javascript:">
      <span class="tabNav-ico tabNav-home"></span>
      <span class="tabNav-txt">首 页</span>

</a>
toIndex: function(){
        this.$router.push("/?entityId="+ localStorage.getItem("entityId"));

}

axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
axios的github:https://github.com/axios/axios

引入axios
首先就是引入axios,如果你使用es6，只需要安装axios模块之后
import axios from ‘axios’;
//安装方法
npm install axios
//或者
bower install axios

也可以用script引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

axios异步请求

概念：axios是一个基于 promise 的 HTTP 库, 主要用于：发送异步请求获取数据
常见的方法：
​ axios(config)
​ axios.get(url, [config])
​ axios.post(url, [data])

发送数据config常用参数：

{
    url: '请求的服务器',
	method: '请求方式', // 默认是 get
    // GET请求参数
    params: {
    	参数名: 参数值
    },
	// POST请求参数, 如果使用axios.post,则参数在url之后直接书写,不需要该位置传递参数
    data: {
    	参数名: 参数值
    },
	// 响应数据格式,默认json
	responseType: 'json'
}

响应数据常用参数：

{
    data: {},		//真正的响应数据(响应体)
    status: 200,	//响应状态码
    statusText: 'OK',	 //响应状态描述
    headers: {},	//响应头
    config: {}		//其他配置信息
}

Get请求

var app = new Vue({
    el: "#app",
    data: {
        user: {}
    },
    //当页面加载完毕后
    created() { 
        //发送GET请求axios.get("请求路径",{ config });
       axios.get("请求路径",{
            //get请求参数
            params: {
                name:"zhangsan",
                age:23
            },
            //响应数据格式为"json"
            responseType: 'json'
        }).then(res => {
            //打印响应数据
            console.log(res);
            //把响应数据赋值给Vue中的user属性
            app.user = res.data;
        }).catch(err => {
            //打印响应数据(错误信息)
            console.log(err);
        });
    }
});

Post请求

var app = new Vue({
    el: "#app",
    data: {
        user: {}
    },
    //当页面加载完毕后
    created() { 
        //发送POST请求axios.post("请求路径",{ 参数 });
        axios.post("请求路径",{
                name:"zhangsan",
                age:23
            }).then(res => {
                console.log(res);
                app.user = res.data;
            }).catch(err => {
                console.log(err);
            });
    }
});