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

在 上张贴 由 lianhe发表回复

加载页面自动触发函数

实例

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实现调用接口加载页面初始数据
  • 浅谈Vue.js 关于页面加载完成后执行一个方法的问题
  • VUE页面中加载外部HTML的示例代码
  • vue.js页面加载执行created,mounted的先后顺序说明
  • 详解vue页面首次加载缓慢原因及解决方案
  • 详解Vue.js在页面加载时执行某个方法
  • vue实现页面加载动画效果
  • Vue 路由切换时页面内容没有重新加载的解决方法
  • 解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
  • 使用vue实现加载页
张贴在2