子域 Laravel 路由和 Vue.js

Question

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

现状

当点击 example.com 时，Laravel returns app 视图启动 Vue.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.