subdomain - Vue.js:vue-router 子域

Question

vue-router 文档没有涉及这个主题。

也许我对 vue-router 可以处理这个的期望说明了我对子域如何运作的根本误解。

这可以由 vue-router 处理吗，如果可以，如何处理，如果不能，为什么不可以？

Answer 1

我在为客户设置多个子域时遇到了同样的问题。

作为@mzgajner确实提到它不是直接可能的。

但我想向您展示一个简单的 hacky 配置，它可以帮助您设置 Vue.js 应用程序在多个子域上工作。

您可以在 javascript 或 HTML 的 anchor 标记 中使用 window.location 将您的应用程序重定向到您的子域。然后设置你的 vue-router 来处理新路由。

我做了 this GitHub repo它在 3 个不同的子域上运行。

在此 GitHub 存储库中，查看 this file .它显示了为不同子域设置不同路由的简单配置。

import Vue from 'vue';
import App from './App';
import index from './router';
import route1 from './router/route1';
import route2 from './router/route2';

Vue.config.productionTip = false;

const host = window.location.host;
const parts = host.split('.');
const domainLength = 3; // route1.example.com => domain length = 3

const router = () => {
  let routes;
  if (parts.length === (domainLength - 1) || parts[0] === 'www') {
    routes = index;
  } else if (parts[0] === 'route1') {
    routes = route1;
  } else if (parts[0] === 'route2') {
    routes = route2;
  } else {
    // If you want to do something else just comment the line below
    routes = index;
  }
  return routes;
};

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router: router(),
  template: '<App/>',
  components: { App },
});

希望对大家有帮助!!!