iframe嵌套Vue通过路径传参取参 query 和 params的区别?

本文详细介绍了在Vue项目中如何通过路由进行参数传递,包括使用query和params两种方式的区别及应用场景。query方法适用于path,而params则对应name,两者均可用于从父组件向子组件传递数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

从iframe里嵌套的vue页面 用原生JS 无法获取路径的传值。

使用 this.$router.query.keyname获取url里带的值,keyname为路径里这是的属性名称。

 

传参1
this.$router.push({
   path:'/home/index',query:{nameID:'xxx'}
})
取参1
this.$router.query.nameID

传参2
tis.$router.push({
   name:'HomeIndex', params:{nameID:'XXX'}
})
取参2
this.$router.params.nameID

  区别: 使用query方法,对应的是path

             使用param方法,对应的是 name

 

path和 name 都是之前在router里定义好的。

Vue应用中,当使用hash模式并需要在iframe嵌套,同时保持URL数不丢失,你可以通过监听浏览器的hashchange事件并在Vue实例的mounted阶段处理这个数。以下是步骤: 1. **Vue配置**: - 配置Vue应用使用hash模式,即设置路由模式为`history.pushState`,以支持动态路径更新: ```javascript import Vue from 'vue'; new Vue({ router: { mode: 'hash', // 其他路由配置... }, }); ``` 2. **Iframe初始化**: - 初始化iframe时,确保设置了同源策略允许来自父页面的通信(`srcdoc`属性): ```html <iframe :srcdoc="getIframeSrc()"></iframe> ``` 或者通过src属性指向一个空页,然后在JavaScript里动态添加内容: ```html <iframe :src="'about:blank'" @load="handleIframeLoaded"></iframe> ``` 3. **处理hash变化**: - 在`methods`里定义一个方法来处理hash的变化,比如`handleHashChange`: ```javascript methods: { handleHashChange(event) { const hashParams = this.parseHashParams(window.location.hash); this.$router.replace({ query: hashParams }); }, }, ``` `parseHashParams`函数用于从URL中提数。 4. **解析传递数**: - `parseHashParams`函数,可以根据实际需求解析数,例如: ```javascript parseHashParams(hash) { return hash.slice(1).split('#')[0].split('&').reduce((params, pair) => { const [key, value] = pair.split('='); params[key] = decodeURIComponent(value); return params; }, {}); } ``` 5. **监听hashchange**: - 在`mounted`钩子里添加hashchange事件监听器: ```javascript mounted() { window.addEventListener('hashchange', this.handleHashChange); this.handleHashChange(); // 初始加载时也触发一次 }, beforeDestroy() { window.removeEventListener('hashchange', this.handleHashChange); } ``` 现在,当你在外部链接或者Vue组件内部改变URL的`#`部分,数会被保留在iframe中并且能正常工作。注意,这种方案通常适用于在同一域名下的场景,跨域时可能会遇到一些限制。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值