vue实现加载页面自动触发函数(及异步获取数据)

 更新时间:2022年07月02日 08:56:05   作者:不说废话斯基  
这篇文章主要介绍了vue实现加载页面自动触发函数(及异步获取数据),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

加载页面自动触发函数

实例

methods:{
     onCreate:async function()  {
      const router = useRouter()
      const route = useRoute()
      const { id = '', f = 1 } = route.query
      console.log("======="+id)
      const res = await reqGetOrderNumByClientId({
        clientId: id
      })
         console.log("-------------------"+res+res.msg)
      if (res.code === 200) {
         await router.push({
          path: '/app/create',
          query: {
            id: id,
            f: f
          }
        })
      } else {
        Dialog.alert({
          title: '提示',
          message: res.msg,
          showCancelButton: false,
          confirmButtonText: '确定'
        })
      }
    }
  },
  mounted:function () {   //自动触发写入的函数
    this.onCreate();
  }

触发模板为

methods: {
          demo() {
          
          }
      },
 mounted: function () {
  alert('页面一加载,就会弹出此窗口')
 }

要在fuction() 前面用async修饰、外部调用前面用await修饰,不然就会获取不到数据。

页面加载时,触发某个函数的方法

需要在加载页面的时候调用生成验证码的click事件函数

解决方法如下

利用Vue中的mounted

mounted:function(){
      this.createcode();//需要触发的函数
    }
//下面是createcode函数
 createcode(){
        var self = this;
        axios.post("/verifycode",{name:this.name,id:this.id}).then(function(res){
          //console.log(res);
          var url= JSON.parse(res.data.code64);
          //console.log(url)
          self.urlIMg  = url.data.base64Code;
        });
      },

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 在vue中axios设置timeout超时的操作

    在vue中axios设置timeout超时的操作

    这篇文章主要介绍了在vue中axios设置timeout超时的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue样式叠层z-index不起作用的解决方案

    vue样式叠层z-index不起作用的解决方案

    这篇文章主要介绍了vue样式叠层z-index不起作用的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue-router 组件复用问题详解

    vue-router 组件复用问题详解

    本篇文章主要介绍了vue-router 组件复用问题详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • element-ui中实现tree子节点部分选中时父节点也选中

    element-ui中实现tree子节点部分选中时父节点也选中

    这篇文章主要介绍了element-ui中实现tree子节点部分选中时父节点也选中的方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue el-upload单图片上传功能实现

    Vue el-upload单图片上传功能实现

    这篇文章主要介绍了Vue el-upload单图片上传功能实现,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-11-11
  • vue中如何下载excel流文件及设置下载文件名

    vue中如何下载excel流文件及设置下载文件名

    这篇文章主要介绍了vue中如何下载excel流文件及设置下载文件名,对vue感兴趣的同学,可以参考下
    2021-05-05
  • Vue组件之间数据共享浅析

    Vue组件之间数据共享浅析

    本文章向大家介绍vue组件中的数据共享,主要包括vue组件中的数据共享使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下
    2022-11-11
  • 浅谈vue 多个变量同时赋相同值互相影响

    浅谈vue 多个变量同时赋相同值互相影响

    这篇文章主要介绍了浅谈vue 多个变量同时赋相同值互相影响,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue3中使用@vueuse/core中的图片懒加载案例详解

    vue3中使用@vueuse/core中的图片懒加载案例详解

    这篇文章主要介绍了vue3中使用@vueuse/core中的图片懒加载案例,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • Vue3中多个弹窗同时出现的解决思路

    Vue3中多个弹窗同时出现的解决思路

    这篇文章主要介绍了Vue3中多个弹窗同时出现的解决思路,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02

最新评论