如何在 Vue3 中实现子域？答案

【问题标题】：How to implement subdomain in Vue3?如何在 Vue3 中实现子域？
【发布时间】：2021-12-29 13:51:45
【问题描述】：

我有一个网站，可以在其中托管不同的商店资料，目前我正在借助商店名称的 slug 生成路线，但不是https://example.com/shop/abc-shop，我希望路线是https://abc-shop.example.com/，并在查找时互联网我找不到使用 Vue3 路由器的方法。请提出一些方法。

【问题讨论】：

我猜你实际上在子域中有一个单独的东西。在这种情况下，您可以使用常规链接
我在子域中有店铺资料，这只是店铺的普通页面。我怎样才能分开它，以便我默认路由到子域？
目前还不清楚您期望它如何工作。不同的域不能成为 SPA 的一部分，因此它与 Vue 路由器的关系如何。必须有一个重定向。您可以使用location 执行此操作。
现在，我有一个商店资料，可以在 https://example.com/shop/abc-shop 查看，但我想在 https://abc-shop.example.com/ 查看它
我的意思是，从技术角度来看，您期望它如何工作。这是一个不同的网站。就像您想将其中一个页面设为 google.com 一样。使用 window.location 重定向到它。它不是路由器的一部分。

标签： vue.js frontend vue-router vuejs3 router

【解决方案1】：

旧的，但我做这样的事情有类似的需求。（博客）

const router = createRouter({
    history: createWebHistory(),
    routes,
})

router.beforeEach((to, from, next) => {
    let subdomain = window.location.host.split('.')[0]
    console.log(subdomain)
    if (subdomain != 'www' && subdomain != 'localhost:3000') {
        to.params['subdomain']= subdomain
    }
    next()
})

然后你可以在你的模板中处理它，对我来说，我使用一个名为 blogRouterView 的自定义组件，它包含特定的路径，然后解析 this.$route 以了解使用异步组件包含哪些组件。 (<component :is="currentURLComponent"></component>)

【讨论】：

【解决方案2】：

就像在 cmets 子域中写的 Estus Flask 一样，是一个完全不同的服务器。浏览器将其视为单独的 www 页面。您需要为此子域编写另一个 vue 项目，并在根域中重定向到此子域。或者您可以准备子域以便能够在例如<iframe> 标签中使用。

【讨论】：