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.js渲染完界面后调用函数在使用vue.js框架的时候，有时候会希望在页面渲染完成之后，再执行函数方法来处理初始化相关的操作，如果只处理页面位置、宽或者高时，必须要在页面完全渲染 ...