引用外部页面是Web前端开发中常见的需求，Vue也不例外。在Vue中，我们可以使用组件化的思想，将外部页面嵌入到Vue组件中，从而实现复用、可维护的效果。下面将介绍Vue中如何加载外部页面。

//在组件中加载外部页面
<template>
<div>
<iframe :src="iframeUrl"></iframe>
</div>
</template>
<script>
export default {
data() {
return {
iframeUrl: 'http://www.example.com'
}
}
}
</script>

其中，我们使用了HTML标签<iframe>来加载外部页面。其中，通过Vue的数据绑定机制，我们将我们要加载的页面URL通过iframeUrl属性动态传递给了<iframe>标签的src属性。这样，我们就可以通过Vue的组件机制，将外部页面嵌入到Vue组件中，方便地实现了页面复用。

而对于一些特殊需求，我们需要在Vue组件中动态地加载外部页面，即根据用户的点击事件或滚动事件等来动态地加载外部页面。下面将介绍在Vue中如何实现动态加载外部页面。

//动态加载外部页面
<template>
<div :class="{loaded:isLoaded}" @click="loadPage">
<img src="loading.gif" v-if="!isLoaded">
<iframe :src="iframeUrl" v-show="isLoaded" @load="loadSuccess"></iframe>
</div>
</template>
<script>
export default {
data() {
return {
iframeUrl: '',
isLoaded: false
}
},
methods: {
loadPage() {//点击事件
this.iframeUrl = 'http://www.example.com';
},
loadSuccess(){//动态加载完成后的回调函数
this.isLoaded = true;
}
}
}
</script>

在这里，我们使用了Vue的数据绑定机制，通过将我们要加载的页面URL保存到data的iframeUrl属性中。然后，我们赋值isLoaded属性为false，表示页面未加载完成。接着，在模板中，判断isLoaded属性是否为true，若是，进行页面渲染；若否，显示loading状态。在点击事件中，我们动态地将iframeUrl赋值为目标URL，当iframe元素上的load事件触发时，调用loadSuccess回调函数，将isLoaded属性赋值为true，使加载完成的页面显示出来。通过这种方式，我们实现了动态加载外部页面。

总之，在Vue中加载外部页面是非常实用的一个功能，我们可以通过组件化的思想，将外部页面嵌入到Vue组件中，实现页面的复用、可维护性；也可以通过动态加载外部页面，根据特定的事件需求，动态地加载外部页面，丰富了页面交互体验，提升了用户体验。