前端路由之hash,以及iframe页面直接传参

//通过hash值路由页面
                       //处理页面刷新时的状态
                        localStorage.hash = location.hash;
                        if(localStorage.hash) {
                                $("a").removeClass("active");
                                var length = $("a").length;
                                for(var i=0; i<length ;i++){
                                        //console.log($("a").eq(i))
                                        //console.log(localStorage.hash)
                                        if($("a").eq(i).hasClass(localStorage.hash.slice(1,localStorage.hash.length))){
                                                $("a").eq(i).addClass('active')
                                        }
                                        if(localStorage.hash =="#addPlace"){
                                                $(".baseData").addClass('active')
                                        }
                                }
                                $("#iframe").attr("src", localStorage.hash.slice(1, localStorage.hash.length) + ".html")
                        }
                        //监听hash值的改变
                        function myFunction() {
                                localStorage.hash = location.hash;
                                var urls = location.hash;
                                $("#iframe").attr("src", urls.slice(1, urls.length) + ".html")
                                $("a").removeClass("active");
                                var length = $("a").length;
                                for(var i=0; i<length ;i++){
                                       //给相对应NAV增加选中样式
                                        if($("a").eq(i).hasClass(localStorage.hash.slice(1,localStorage.hash.length))){
                                                $("a").eq(i).addClass('active')
                                        }
                                }
                        }



//调用子页面re方法(此时可以传递参数)
document.getElementById("iframe").contentWindow.re();
//调用父页面alertWindow方法(此时可以传递参数)

parent.alertWindow();



WEB前端学习交流群21 598399936



### 前端页面路由传递MD5参数的方法 在前端应用中,可以通过两种主要的方式将MD5作为参数传递给其他路由:`params` 和 `query`。对于简单的场景,推荐使用`query`来传输MD5值,因为这种方式更直观,并且可以在URL中直接看到所携带的信息。 当需要隐藏这些信息时,则可以选择采用`params`方式进行传递。下面分别给出这两种方法的具体实现: #### 使用Query方式传递MD5参数 如果打算通过查询字符串的形式发送MD5数据,在创建链接或导航至新页面的时候,只需简单地附加相应的键值对即可。例如,假设有一个名为`md5Hash`的变量保存着计算好的MD5散列值,那么可以这样做: ```javascript // 导航到目标路径并附带MD5参数 this.$router.push({ path: '/target', query: { md5: md5Hash } }); ``` 此时访问的目标URL将会类似于 `/target?md5=abc123def456ghi789jkl0mnoprstuvxyz`[^2]。 #### 使用Params方式传递MD5参数 另一种情况是希望把MD5作为一个动态片段嵌入到实际的路由地址里而不暴露于查询串之中。这时应该定义好匹配模式以及对应的组件映射关系之后再执行跳转操作: 首先配置路由规则如下所示: ```javascript const routes = [ { path: '/item/:id', name: 'ItemDetail', component: ItemComponent, }, ]; ``` 接着就可以像这样推送带有ID(这里即为MD5)的新位置了: ```javascript // 将MD5作为参数的一部分推送到新的路由上 this.$router.push({ name: 'ItemDetail', params: { id: md5Hash }}); ``` 在这种情况下,最终形成的URL可能是这样的形式:`/item/abc123def456ghi789jkl0mnoprstuvxyz`。 无论选择了哪种途径来进行参数交换,接收方都需要正确解析来自上级组件传来的属性才能继续后续逻辑处理工作。比如在一个Vue实例内部获取上述提到过的MD5值可参照以下做法: ```javascript export default { mounted() { const md5FromQuery = this.$route.query.md5; // 如果是从query获得 console.log('Received MD5 from Query:', md5FromQuery); const md5FromParam = this.$route.params.id; // 若是由param传来则如此提取 console.log('Received MD5 from Param:', md5FromParam); } } ``` 以上就是关于如何在前端页面间利用路由机制安全有效地共享MD5哈希值的一些指导说明。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值