vue静态路由配置外链嵌入系统

要在Vue应用程序中配置静态路由外链嵌入系统，需要在Vue Router中定义外链路由，并将其指向您要嵌入的系统的URL。以下是一个示例：

import Vue from 'vue'
import Router from 'vue-router'
import External from '@/components/External.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/external',
      name: 'External',
      component: External,
      props: { url: 'https://example.com' } // 将外链URL传递给组件
    }
  ]
})

在上面的示例中，我们定义了一个名为External的路由，并将其指向一个名为External的Vue组件。我们还将外链URL传递给组件作为props。

接下来，我们需要创建External组件，并使用iframe标签将外链网站嵌入到Vue应用程序中。以下是External组件的示例代码：

<template>
  <div>
    <iframe :src="url" frameborder="0" width="100%" height="100%"></iframe>
  </div>
</template>

<script>
export default {
  props: ['url']
}
</script>

在上面的示例中，我们使用iframe标签将外链网站嵌入到Vue应用程序中。我们还使用props接收传递的外链URL，并将其设置为iframe的src属性。

最后，我们需要在Vue应用程序中使用router-link标签来链接到External路由。以下是一个示例：

<router-link to="/external">Visit External Site</router-link>

在上面的示例中，我们使用router-link标签将用户导航到External路由。当用户点击链接时，Vue应用程序将显示External组件，并将外链网站嵌入到应用程序中。

总之，配置Vue静态路由外链嵌入系统需要在Vue Router中定义外链路由，并创建一个Vue组件来嵌入外链网站。通过使用router-link标签，我们可以将用户导航到外链路由并嵌入外链网站。