子域 Laravel 路由和 Vue.js

Question

我正在使用Laravel 5.4、vue.js 2.3 和vue-router。

现状

当example.com 被点击时，Laravel 返回启动Vue.app 的app 视图

web.php

Route::get('/', function () {
    return view('app');
});

app.js

const routes = [
    { path: '/', component: App },
];

const app = new Vue({
    el: '#app',
    router,
    data () {
        return {}
    },
});

App.vue

export default {
    ...
}

我想要做什么

如果输入了usa.example.com，我希望App.vue 中的alert() 显示usa。

如果输入了italy.example.com，我希望App.vue 中的alert() 显示italy。

我阅读了vue-router 的文档，但我不确定这是Laravel 问题、Vue 问题还是两者兼而有之。

App.vue

export default {
    ....
    created() {
        alert('subdomain is ' + $route.params.subdomain)
    }
}

Answer 1

VueRouter 不跟踪子域。

但是，您可以从 location 获取子域并在组件的 created 方法中使用它：

created() {
  let subdomain = location.hostname.split('.').shift();
  alert('subdomain is ' + subdomain);
}

以上代码基于this answer。