如果你希望在路由组件的实例存在时,不加载Iframe内容,可以使用Vue的条件渲染指令v-if
或v-show
来控制Iframe的显示。以下是一个基于Vue 3的示例:
v-if
v-if
指令会根据表达式的真假来添加或移除元素。当路由组件的实例存在时,v-if
会阻止Iframe被渲染到DOM中。
<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来控制元素的显示和隐藏。
<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的显示或隐藏。
领取专属 10元无门槛券
手把手带您无忧上云