1.路由配置router.js

const QuickLogin = () => import("./views/quick-login.vue");

{

path: "/quick-login.html",

name: "QuickLogin",

component: QuickLogin

},

2.login.vue里面

<a href="http://www....../coder/oauth2/qq/toLoginPage">

<i class="fa fa-qq"></i>

</a>

3.quick-login.vue中就写一些用户名，密码，发送验证码等内容

里面有获取地址栏的code和state

方法为：

// 获取地址栏的参数数组
getUrlParams() {
            var search = window.location.search;
            // 写入数据字典
            var tmparray = search.substr(0, search.length).split("&");
            var paramsArray = [];
            if (tmparray != null) {
                for (var i = 0; i < tmparray.length; i++) {
                    var reg = /[=|^==]/; // 用=进行拆分，但不包括==
                    var set1 = tmparray[i].replace(reg, "&");
                    var tmpStr2 = set1.split("&");
                    /* var array = [];
                    array[tmpStr2[0]] = tmpStr2[1]; */
                    paramsArray.push(tmpStr2[1]);
                }
            }
            // 将参数数组进行返回
            return paramsArray;
},

发送验证码代码：

timeCount() {
            this.btnText = `${this.btnTime}S`;
            let st = setInterval(() => {
                this.btnTime--;
                if (this.btnTime === 0) {
                    this.btnText = "发送验证码";
                    this.btnTime = 59;
                    clearInterval(st);
                } else {
                    this.btnText = `${this.btnTime}S`;
                }
            }, 1000);
}