首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当路由组件的实例存在时,不加载Iframe内容

如果你希望在路由组件的实例存在时,不加载Iframe内容,可以使用Vue的条件渲染指令v-ifv-show来控制Iframe的显示。以下是一个基于Vue 3的示例:

使用v-if

v-if指令会根据表达式的真假来添加或移除元素。当路由组件的实例存在时,v-if会阻止Iframe被渲染到DOM中。

代码语言:javascript
复制
<template>
  <div>
    <!-- 其他内容 -->
    <router-view></router-view>
    <!-- 只有当路由组件实例不存在时才显示Iframe -->
    <iframe v-if="!isRouteComponentVisible" src="your-url-here"></iframe>
  </div>
</template>

<script>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const isRouteComponentVisible = ref(false);

    // 监听路由变化
    watch(
      () => route.path,
      (newPath) => {
        // 根据路由路径判断路由组件是否可见
        // 这里假设当路径为'/specific-route'时不显示Iframe
        isRouteComponentVisible.value = newPath !== '/specific-route';
      }
    );

    return {
      isRouteComponentVisible,
    };
  },
};
</script>

使用v-show

v-show指令会根据表达式的真假来切换元素的CSS属性display。与v-if不同,v-show不会移除元素,而是通过CSS来控制元素的显示和隐藏。

代码语言:javascript
复制
<template>
  <div>
    <!-- 其他内容 -->
    <router-view></router-view>
    <!-- 根据路由组件实例的存在与否切换Iframe的显示状态 -->
    <iframe v-show="!isRouteComponentVisible" src="your-url-here"></iframe>
  </div>
</template>

<script>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const isRouteComponentVisible = ref(false);

    // 监听路由变化
    watch(
      () => route.path,
      (newPath) => {
        // 根据路由路径判断路由组件是否可见
        // 这里假设当路径为'/specific-route'时不显示Iframe
        isRouteComponentVisible.value = newPath !== '/specific-route';
      }
    );

    return {
      isRouteComponentVisible,
    };
  },
};
</script>

在这两个示例中,我们都使用了Vue Router的useRoute钩子来获取当前的路由信息,并通过监听路由变化来更新isRouteComponentVisible的状态。根据这个状态,我们可以控制Iframe的显示或隐藏。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券