Vue.js:vue-router子域

Question

vue-router文档未涉及此主题.

也许我期望vue-router 可以处理这个问题,这说明了我对子域运行方式的基本误解.

这可以由vue-router处理,如果是,如何,如果没有,为什么不呢？

Answer 1

不,这是不可能的.

vue-router使用history.pushState,它不允许您更改原点.从文档引用:

新URL必须与当前URL的源相同; 否则,pushState()将抛出异常.

换句话说 - vue-router是客户端路由器,您无法在不重新加载页面的情况下在客户端(在浏览器中)更改子域.

Answer 2

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

正如@mzgajner所提到的，这是directly不可能的。

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

您可以使用window.locationjavascript或HTML anchor tag来在子域上重定向您的应用。然后设置您的vue-router以处理新路由。

我已经制作了这个GitHub存储库，它可以在3个不同的子域上运行。

在此GitHub存储库中，查看此文件。它显示了一个简单的配置，可以为不同的子域设置不同的路由。

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 },
});

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