mui与vue混合开发下，页面参数传递

这是在app项目早期所遇到的问题，在这个项目中，使用mui作为页面的基础效果，布局的实现，使用vue来进行整个网站所有数据的渲染，于是首当其冲的第一个问题，就是页面参数的传递。对于mui，有很好的页面参数传递方案，但是如何把mui传递的参数绑定到vue中，就稍微有那么一些麻烦了，在研究了一段时间后，共总结了两个办法，发在文章里留做记录。

以我要传递的参数名称为url为例。

方法一：带地址后缀传参

1.在准备传参数的页面，openWindow方法中，直接给要传参的页面加后路径，就像是常见的get请求一样，代码如下。

mui.openWindow({
    url:"text.html?url="+url,
    id:"text.html",
        waiting: {
             autoShow: true,
       }
})

2.在接收参数的页面，首先在js外面定义一个接收参数的全局方法。

function  getname(name) {     
    var  reg = new  RegExp("(^|&)" + name + "=([^&]*)(&|$)");     
    var  r = window.location.search.substr(1).match(reg);     
    if(r != null) return   unescape(r[2]);
    return  null;
}

然后在vue中定义初始的字段。

el:'#app',
data:{
    url:'',
},

最后，执行之前定义的获取参数方法，将值附加到初始字段

created(){
    this.url= getname('currency');
},

方法二：mui自带的data数组传参

1.在准备传参数的页面，openWindow方法中，定义extras，代码如下；

mui.openWindow({
    url:"text.html",
    id:"text.html",
    extras:{  
        url:'https://www.ruletree.club',  
    }  
    waiting: {
         autoShow: true,
   }
})

2.在接收参数的页面中，直接通过mui的方式获取，并附加vue字段，记得先定义好url字段

created(){
    mui.plusReady(function(){
        
        var self = plus.webview.currentWebview();
        var url = self.url;//获得参数
        vm.url = url; //参数赋值
    });
},

以上就是mui混合vue开发时的主要传参方法，感觉还算简单，坑也不算太多。