vue 嵌套 iframe 如何刷线还在当前的子组件的路由 而不是导航栏的地址

Vue 中嵌套 `iframe` 并保持子组件路由刷新而不影响父组件的导航栏地址，通常需要利用 Vue 的特性配合一些特定的技术处理。以下是一个简化的步骤：

1. **单页面应用** (SPA) 理念：确保整个项目是基于 Vue.js 的单页应用程序架构，而不是传统的服务器渲染应用。

2. **Vue Router 子路由**：在子组件中使用 Vue Router 的嵌套路由功能。创建一个独立的子路由路径，比如 `/child-router`, 这个路径下的所有操作将只影响嵌套的 iframe 内部。

3. **IFrame通信**：利用 Vue 的 `v-if` 或者 `v-show` 操作动态加载和卸载 iframe，当子路由改变时，更新 iframe 的内容。可以考虑使用 Vue 的 `$parent` 或者 `$emit` 来触发父组件的数据更新，并在 iframe 中监听这个事件。

4. **跨域同源策略**：如果 iframe 要访问的外部资源不同源，你可能需要在服务端设置 CORS 允许跨域访问，或者在浏览器配置允许跨源请求。

5. **状态管理**：使用 Vuex 或者其他状态管理库，让路由变化不影响父组件的状态，只作用于 iframe 内的组件。

示例代码片段（简化版）：

<template>
  <div>
    <iframe :src="'/' + $route.path" v-if="shouldLoadIframe"></iframe>
    <button @click="changeChildRoute">切换子路由</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shouldLoadIframe: false,
      childRoute: '/child-router',
    };
  },
  methods: {
    changeChildRoute() {
      this.childRoute = '/new-child-route'; // 更新子路由
      this.$emit('update:shouldLoadIframe', true); // 触发父组件更新 iframe
    },
  },
  computed: {
    shouldLoadIframe() { // 使用 computed 计算是否显示 iframe
      return this.$route.path === this.childRoute;
    },
  },
};
</script>