类似uni-app页面之间的传值,vue有方法么
发布于 3 年前 作者 chaoren 1316 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

我百度查找了很多vue页面之间的传值
1是利用.query穿参,或者params传参,但是新的页面需要很多数据,那url的后缀岂不是很长,很麻烦。
2. 根据路径来传递及接收参数,最后弄得url和下图这个一样,很长。
https://img-blog.csdn.net/20180426133847426?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTQzNTM3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
我想问vue有没有UNI-app的那种传参方式
a页面

<header class="mui-bar mui-bar-nav">  
            <h1 class="mui-title">A</h1>  
        </header>  
        <div class="mui-content">  
            <input type="text" readonly placeholder="未选择">  
            <button type="button" class="mui-btn mui-btn-blue">选取地区</button>  
        </div>  

        <script src="js/mui.min.js"></script>  
        <script type="text/javascript">  
            mui.init();  
            // 自定义监听select事件  
            document.addEventListener('select', function(e){  
                var text = e.detail.text;  
                document.querySelector("input").value = text;  
            });  
            // 按钮点击事件  
            document.querySelector(".mui-btn-blue").addEventListener('tap', function(){  
                // 打开B页面,选取一个结果  
                mui.openWindow('B.html');  
            });  
        </script>

b页面

 <header class="mui-bar mui-bar-nav">  
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
            <h1 class="mui-title">B</h1>  
        </header>  
        <div class="mui-content">  
            <ul class="mui-table-view">  
                <li class="mui-table-view-cell">  
                    <a class="mui-navigate-right">  
                        上海  
                    </a>  
                </li>  
                <li class="mui-table-view-cell">  
                    <a class="mui-navigate-right">  
                        深圳  
                    </a>  
                </li>  
                <li class="mui-table-view-cell">  
                    <a class="mui-navigate-right">  
                        北京  
                    </a>  
                </li>  
            </ul>  
        </div>  

        <script src="js/mui.min.js"></script>  
        <script type="text/javascript">  
            mui.init();  
            mui('ul').on('tap', 'li', function() {  
                // 获取当前选择的内容  
                var text = this.innerText;  
                // 通知上个页面  
                var w = plus.webview.currentWebview();  
                var opener = w.opener();  
                mui.fire(opener, "select",{  
                    text: text  
                });  
                // 关闭本页面  
                w.close();  
            });

类似这样,不需要放在url里面来传数据

回到顶部