技术总结——Vue页面刷新的方法

写在前面

这个作业属于哪个课程	<班级的链接>
这个作业要求在哪里	<作业要求的链接>
这个作业的目标	个人技术总结
作业正文	正文如下
其他参考文献	...

 

---

Part1.技术分享

好像没有什么干货可以分享，就分享一下Vue框架中踩到的坑以及我的解决方法吧

一、Vue多次点击路由会报错

• 重复点击跳转按钮不起作用，浏览器报错如图
  

• 查阅了资料[1]，发现是router版本的bug，需要升级router，但是不知道为啥我试了之后没有效果，因采用了一个比较取巧的办法做页面刷新：每次刷新页面时先跳到空白页面，再从空白页面跳回来，具体方法如下。

首先创建一个空白页面，路由配置为 /refresh ，在空白页接收目标页面的路径和所需要的参数，然后再进行跳转，空白页具体代码如下

使用方法代码如下

this.$router.push({
      path: '/refresh',
      query:{
            destination: '/GoodsDetails'      //要刷新页面的路径
            param: that.goodsId,      //该页面要使用到的参数，根据需要添加，可为json格式，亦可空
      }
})

用以上的方法就可以实现页面的刷新

我是快活的分割线

 

二、Element-UI使用时遇到的一点小问题

• 在给el-card绑定点击事件的时候发现 @click 不起作用，查阅资料[2]时发现， @click 等事件是经过 Vue 封装的，所以在一些实际上处理 DOM 原生事件的场合需要添加额外的标识符。而 .native 就是给组件绑定原生事件采用的方法,因此需要在给el-button之外的组件绑定点击事件时要写成 @click.native=function()

我是快活的分割线

 

三、如何给按钮添加倒计时效果

• 在做发送邮件的功能时想要给按钮做个倒计时效果，防止用户频繁点击按钮，像后端发出请求，找了好久终于在一篇博客了找到了教程[3]，以下是实现的代码

data() {
      return {
            // 倒计时按钮相关
            content: '获取验证码',      //显示在按钮上的字样
            totalTime: 60,  // 倒计时，除了显示在按钮上，没有实际用处
            isDisable: false,      //控制按钮是否可点击    
      }
},
methods: {
    submitEmail(formName) {
            // 按钮倒计时事件
            if (this.isDisable) return ;
            this.isDisable = true;   
            this.content = this.totalTime + 's后重新获取';      //显示在按钮上的倒计时
            let clock = window.setInterval(() => {    
                  this.totalTime--;      //改变倒计时数字
                  this.content = this.totalTime + 's后重新获取';
                  if (this.totalTime < 0) {      
                        window.clearInterval(clock);
                        this.content = '重新获取验证码';
                        this.totalTime = 60;
                        this.isDisable = false;  //这里重新开启
                  }
            },1000) // 每次一秒

            //点击按钮要触发的事件代码
            ...
      },

使用代码如下

{{content}}

效果图

我是快活的分割线

 

四、分享一段检验手机号码格式的js代码

const reg = /^((13[0-9])|(14[5-9])|(15[0-3])|(15[5-9])|(166)|(17[0-8])|(18[0-9])|(19[8-9]))\d{8}$/;
if (reg.test(value)) {
      callback()
} else {
      return callback(new Error('请输入正确的手机号'));
}

 

---

Part2.参考资料

• [1]Element/vue router连续点击同一路由报错解决方法 作者：银鞍照白马
• [2]elementUI中的点击事件@click 作者：家住魔仙堡的大柠
• [3]vue实现按钮倒计时 作者：codeXml