javascript - vue项目如何在初始化之前跳转外部页面？

Question

vue项目内有一个分享功能，但是这个分享出去的页面打开会非常慢，所以就想到了单独写了一套H5页面专门用于手机端打开，然后在这个vue项目的分享页面初始化函数里面加一个判断终端是否为移动端，如果是就再做一次跳转，到这个单独的H5页面上去，这样就不会去加载vue框架，打开速度会更快。以上是初始方案和预期。

但是问题就是：因为这个分享链接的路径仍然是VUE项目的路由页面，所以尽管在初始化生命周期内就做了判断并加以重现跳转，在测试的时候发现，分享出去用手机打开网页的时候，仍然需要加载很久的vue框架，并且在成功初始化vue项目后才会跳转到H5。这样就没有达到预期的效果。
然后又做了第二次改动，把这个判断的流程从原来的分享页面的生命周期里面搬到router路由拦截里面去
，以期能绕开vue项目的初始化并快速跳转到H5页面打开界面的效果。但是仔细想了一下，仍然无法绕开vue项目初始化这个阶段，依然会非常耗时间。
所以想请教一下，这种情况下，如何能实现在vue项目内，在项目初始化之前就能通过判断，跳转到第三方页面去——需要注意的一点是，不能直接在静态入口页面index.html里面就直接跳转，因为不能影响vue项目的正常流程，只能在特定的路由/invite页面才能做对应跳转。

ps:现在我给产品的保底方案就是在分享功能这里，单独加一个手机端的分享链接（虽然能简单粗暴的解决问题），但是有点不甘心啊，主要就是想在/invite这个路由界面一加载就做判断并且跳转的方案最优雅。但是默认打开这个路由的时候，都会去初始化加载vue框架，问题症结就在这里

Answer 1

目前的解决方案是在静态资源文件index.html内加入终端判断，是移动端的直接跳转到外部页面。实现了打开分享路由页面后不加载vue框架，直接跳转的目的

Answer 2

讲真，你这套方案槽点有点多……

1. Vue 框架并不大，没记错的话连 pinia + i18n 也就 276KB，如果有 gzip 就不超过 100KB，即使网速只有 10Mb，也不到 1s 就下载完了。
2. 所以你的第一步应该尝试路由懒加载和分模块加载方式，减少第一次打开所需的时间。
3. 其次，网页的运行环境在浏览器里，相当于网页打开的最后一步，非常不适合用来做跳转。跳转越早越好，应该在网关层做。
4. 最后，如果你的判断放在 Vue 里，那么无论如何都要等框架的前置初始化完成，不可能快得了。你必须把独立页面独立出去，比如只用原生 JS 开发。

总之，当你要做架构的工作时，就要用架构的思维模式去思考。烧煤上不了太空。

Answer 3

你需要理解vue的插件实现原理，vue的插件本身就是具备完整功能的，它只是被挂载到vue上，然后让你可以在vue内去使用它而已。你初不初始化vue跟使用vue-router插件是两个独立的体系，根本不相关：

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes,
});

console.log(router);
// TODO...

createApp(AppComponent).use(router).mount('#root');

Answer 4

加一个判断终端是否为移动端

这部分可以写在 main.js App.vue mount 挂在之前，路由可以通过 location.href 获取