Vue中使用iframe链接外部路径时

在使用iframe时想通过一些变量来进行html网页的特定跳转，但是看了网上很多方法都不太有用，差点还把我自己的代码搞蒙了，不过最后总算是想到了办法，就是直接用v-bind来做的，很强，不多BB，上代码！！！

以下是我在父视图中写的传参的代码

this.$router.push({path: "../JBrowse/", query:{Genome: genome.text}});

通过this.$router.push来传递我的genome.text。

子视图中的代码则如下所示

<template>
    <div>
        <hr style="color: #2E8B57">
        <br>
        <p class="jbrowse-genome">JBrowse基因组名称</p>
        <iframe ref="iframe" id="bdIframe" :src="getUrl()" frameborder="0" scrolling="yes"></iframe>
    </div>
</template>

<script>
    export default {
        name: "JBrowse",
        data() {
            return {
                genome:this.$route.query.Genome,
            }
        },
        methods: {
            //获取外部接口信息
            getUrl() {
                let genome = this.genome
                // console.log(genome)
                var url = 'http://101.37.XX.XX/jbrowse/?data=' + genome
                // console.log(url)
                return url;
            }
        }
    }
</script>

在template中直接使用getUrl这个自执行函数来返回我所需的url，在script中定义了这个getUrl函数，而在这个自执行函数里面首先需要做的就是声明一个genome变量，这样便可以完成iframe的URL跳转。

这个东西困扰了我一整天，总算解决了这个问题！！！