qiankun打开外链,如何防止路由自动带上微应用路由前缀

在 qiankun 架构中,微应用通常会挂载到一个特定的路径下,这个路径作为微应用的基础路径(base path)。当微应用内部需要打开外链时,如果不做特殊处理,确实可能会因为 qiankun 的路由劫持而带上微应用的基础路径前缀

要防止这种情况,需要确保在打开外链时直接通过浏览器来操作,而不是通过 Vue Router 或其他客户端路由库。下面是一些建议的步骤来实现这一点:

  1. 识别外链
    在微应用中,确保能够识别出哪些链接是外链。这可以通过检查链接的 href 是否以 http://https:// 开头,或者根据一些特定的规则(如白名单/黑名单)来判断。

  2. 直接打开外链
    对于识别出的外链,使用 window.open 或直接修改 window.location.href 来打开。这样可以确保链接是在浏览器层面直接打开的,而不会受到 qiankun 路由劫持的影响

  3. 不要通过 Vue Router 跳转
    确保不要通过 Vue Router 的 push 或 replace 方法来跳转外链。这些方法会触发 qiankun 的路由管理逻辑,可能会导致带上微应用的基础路径前缀

  4. 使用 target="_blank"
    对于需要在新标签页中打开的外链,可以在 <a> 标签上设置 target="_blank" 属性。这样即使链接被错误地当作内部链接处理,也会在新标签页中打开,而不会影响到当前微应用的路由状态

  5. 在 qiankun 配置中避免不必要的路由劫持
    检查 qiankun 的配置,确保没有不必要的路由劫持或重定向逻辑。特别是 onRouteChange 钩子,应该只用于处理需要由 qiankun 管理的路由变化

  6. 使用自定义协议
    如果需要在微应用之间跳转,而不是直接跳转到外部网站,可以考虑使用自定义协议(如 app://)。这样可以通过 qiankun 的 API 来实现微应用之间的跳转,而不会受到浏览器或 qiankun 路由劫持的影响

  7. 测试
    在开发过程中和部署前,充分测试微应用中的外链跳转逻辑,确保在各种情况下都能正常工作

下面是一个简单的示例代码,展示了如何直接打开外链:

// 假设你有一个链接元素  
const linkElement = document.getElementById('external-link');  
  
// 监听点击事件  
linkElement.addEventListener('click', function(event) {  
  // 阻止默认行为,防止 Vue Router 或其他库拦截  
  event.preventDefault();  
    
  // 检查链接是否是外链  
  if (isExternalLink(linkElement.href)) {  
    // 直接打开链接  
    window.open(linkElement.href, '_blank');  
  }  
});  
  
function isExternalLink(href) {  
  // 实现你的外链识别逻辑  
  // 例如,检查链接是否以 "http://" 或 "https://" 开头  
  return /^https?:\/\//.test(href);  
}

Qiankun 中,子应用内部路由的实现方式,主要有两种: 1. 子应用使用自己的路由系统:子应用可以使用自己的路由系统,例如 Vue Router、React Router 等,在子应用中完成路由跳转和页面渲染。这种方式下,主应用只需要将子应用加载到指定的容器中,不需要关心子应用内部的路由实现。 2. 子应用使用主应用路由系统:子应用可以使用主应用路由系统,例如主应用使用 Vue Router 实现路由,子应用可以使用 Vue Router 进行路由跳转和页面渲染。这种方式下,主应用需要将子应用加载到指定的容器中,并且在主应用路由表中配置子应用路由规则。 下面是第二种方式的代码示例: 首先,我们需要在主应用路由表中配置子应用路由规则: ```javascript import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const routes = [ { path: '/app1', component: () => import('@/views/App1.vue'), children: [ { path: '/app1/page1', name: 'page1', component: () => import('app1/Page1.vue'), }, { path: '/app1/page2', name: 'page2', component: () => import('app1/Page2.vue'), }, ], }, ]; const router = new VueRouter({ routes, }); export default router; ``` 在上述代码中,我们在主应用路由表中定义了 `/app1` 的路由规则,并配置了两个子路由 `/app1/page1` 和 `/app1/page2`,子路由的组件分别位于子应用 `app1` 中的 `Page1.vue` 和 `Page2.vue`。 然后,在子应用中,我们需要使用 `history` 模式,并在路由模式中加上子应用前缀,例如 `/app1`: ```javascript import Vue from 'vue'; import VueRouter from 'vue-router'; import App from './App.vue'; Vue.config.productionTip = false; let instance = null; function render(props = {}) { const { container, routerBase } = props; const router = new VueRouter({ base: window.__POWERED_BY_QIANKUN__ ? routerBase : '/', mode: 'history', routes: [ { path: '/app1/', component: App, children: [ { path: 'page1', name: 'page1', component: () => import('./views/Page1.vue'), }, { path: 'page2', name: 'page2', component: () => import('./views/Page2.vue'), }, ], }, ], }); instance = new Vue({ router, render: (h) => h(App), }).$mount(container ? container.querySelector('#app') : '#app'); } if (!window.__POWERED_BY_QIANKUN__) { render(); } export async function bootstrap() {} export async function mount(props) { render(props); } export async function unmount() { instance.$destroy(); instance = null; } ``` 在上述代码中,我们在子应用中定义了路由规则,并使用 `history` 模式进行路由跳转和页面渲染。在 `render` 函数中,我们使用 `routerBase` 参数来设置子应用前缀,例如 `/app1`,这样就可以在主应用中正确加载子应用路由规则了。 通过以上配置,我们就可以在 Qiankun 中实现子应用内部路由的跳转和页面渲染了。需要注意的是,在实现子应用内部路由时,需要确保子应用和主应用路由模式、路由规则等设置一致,以避免出现路由冲突和页面加载错误等问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

五秒法则

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值