Vue.js: vue-router 子域

Question

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

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

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

Answer 1

不，这不可能。

vue-router 使用 history.pushState，它不允许您更改原点。引自文档：

The new URL must be of the same origin as the current URL; otherwise, pushState() will throw an exception.

换句话说 - vue-router 是一个 client-side 路由器，您不能在不重新加载页面的情况下更改 client-side（在浏览器中）的子域。

Answer 2

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

正如 @mzgajner 提到的那样，directly 确实不可能。

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

您可以在 javascript 或 HTML 的 anchor tag 中使用 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 },
});

希望对大家有所帮助！！！

Vue.js: vue-router 子域

Vue.js: vue-router subdomains

subdomain

vue.js

vue-router