Vue路由外链显示问题解答
什么是Vue路由外链？
Vue路由外链是指在Vue.js中，链接到应用程序的外部页面。这些外部页面可以是您当前网站之外的其他网站，也可以是您自己的其他页面。
为什么Vue路由外链会存在显示问题？
Vue路由外链默认是不支持跨域请求的，但在实际开发中，我们经常需要链接到和我们当前网站不同域名的页面。
如何解决Vue路由外链的跨域问题？
解决Vue路由外链的跨域问题最简单的方法是在服务器端做代理请求。通过服务器端转发请求，使得我们当前网站从请求外部链接的部分解耦，然后将服务器响应回来的数据返还到前端。这样就能够完美的避开跨域请求的限制，实现跨域访问。
Vue怎么实现外链显示？
首先，您需要在Vue项目的入口文件中注册Vue Router：
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const routes = [
{
path: '/external-url-example',
name: 'ExternalUrl',
meta: { external: true },
component: () =>
import('./views/ExternalUrlExample.vue')
}
]
const router = new Router({
mode: 'history',
routes
})
export default router
创建 `` 组件跳转到外部链接页面：
OPEN EXTERNAL LINK
在组件中添加以下代码即可正常显示外部链接：
created() {
if (this.$route.meta.external) {
window.open(this.$route.path + '/external')
this.$router.push('/')
}
}
这里，我们使用created()生命周期钩子，动态生成一个新的窗口打开 URL。然后，重定向到主页，避免路由发生影响。
结语
以上是Vue路由外链显示问题的解决方法。虽然使用服务器代理请求的方法很方便，但是可能存在一定的安全隐患，最好在实际开发过程中特别注意相关方面。
