在web开发中，我们经常需要使用第三方库或服务来丰富我们的应用，而这些库或服务可能提供了一个外部页面（例如支付页面、登录页面等），那么如何在Vue项目中使用这些外部页面呢？接下来我们将介绍如何用Vue新增外部页面。

首先，我们需要在Vue项目中创建一个新的页面组件，这个组件将展现我们的外部页面。在组件中，我们需要使用Vue的特殊标签——iframe来加载外部页面。以下是示例代码：

<template>
<div>
<iframe src="https://example.com/externalPage" frameborder="0" width="100%" height="100%"></iframe>
</div>
</template>
<script>
export default {
name: 'ExternalPage'
}
</script>
<style scoped>
/* 样式代码 */
</style>

上述代码中，我们创建了一个名为ExternalPage的Vue组件，在模板中使用iframe标签加载我们想要的外部页面。需要注意的是，iframe标签的宽度和高度设置为100%，以充满整个页面容器。

接下来，我们需要在Vue的路由中定义这个组件，以便在需要的时候进行导航。以下是示例代码：

import ExternalPage from './components/ExternalPage.vue'
const routes = [
{
path: '/external',
name: 'External',
component: ExternalPage
},
// 其他路由
]
export default new Router({
mode: 'history',
routes
})

上述示例代码中，我们首先引入了我们刚刚创建的ExternalPage组件。然后，在路由中定义了一个指向该组件的路径，并取了一个名字External。最后，我们将该路由加入到路由数组中。需要注意的是，我们在路由中定义的路径（/external）应与iframe标签中的src属性中的地址相匹配。

好了，现在我们已经成功地新增了一个外部页面，并在Vue项目中进行了导航。但是，一些服务提供商可能会限制iframe的使用，从而导致我们的运行出现问题。此时，我们需要考虑使用其他解决方案，比如使用一些第三方的JS库，或者通过Api来进行交互。

总之，Vue使得我们可以轻松地管理我们的前端代码，而新增外部页面的方法也很简单。当然，我们在使用外部页面时，需要注意一些安全性问题，确保我们的应用代码不会受到恶意攻击。