vue中使用iframe嵌套页面

Question

朋友们，vue中使用了iframe，iframe中可以使用vue配置好的路由去切换页面嘛，我现在试验了一下，src里面写页面的路由和瞎写他都显示整个后管台，怎么可以只显示页面呀，

Answer 1

【以下回答由 GPT 生成】

解决方案

在Vue中使用iframe嵌套页面时，我们可以通过在父页面中使用Vue的路由来控制iframe子页面的切换。这里提供一种基本的解决方案：

1. 首先，需要在Vue中配置好路由。在router/index.js文件中，定义你的路由规则。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  // 其他路由规则...
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

1. 在父页面的模板中，使用<router-view></router-view>标签来渲染子页面：

<template>
  <div>
    <!-- 其他父页面的内容... -->
    <iframe ref="myIframe" :src="iframeSrc"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iframeSrc: ''
    }
  },
  methods: {
    changeIframe(routePath) {
      // 根据传入的路由路径拼接完整的URL
      const url = window.location.origin + routePath
      this.iframeSrc = url
    }
  },
  mounted() {
    // 监听路由变化
    this.$router.afterEach((to, from) => {
      // 调用changeIframe方法切换子页面
      this.changeIframe(to.path)
    })
  }
}
</script>

1. 在父页面中的mounted钩子函数中，监听路由的变化，并在路由切换后调用changeIframe方法来切换子页面。changeIframe方法将传入的路由路径拼接成完整的URL，并将其赋值给iframeSrc属性，从而改变iframe子页面的src属性，实现页面的切换。

这样，当父页面的路由发生变化时，iframe子页面的内容也会相应地切换。希望以上解决方案能帮助到你，如果有更多的问题，请随时提问。

【相关推荐】

• 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7627452
• 这篇博客你也可以参考下：vue项目中使用iframe嵌套外部链接页面的实现与应用
• 除此之外, 这篇博客: 在vue中嵌入iframe页面中的 五、代码示例 部分也许能够解决你的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^