Laravel Vue VueRouter 历史模式

Question

我正在用 laravel、vue 和 vue router 构建一个电子商务项目

我想在历史模式下使用 vue 路由器，但它给我带来了麻烦。

这是我的代码

new Vue({
    el: '#app',
    router: new VueRouter({
        mode: 'history',
        routes
    })
});

这是我在 web.php 中的路由，它有语言环境中间件

Route::group(['prefix' => '{locale}', 'where' => ['locale' => '[a-zA-Z]{2}'], 'middleware' => 'setlocale'], function () {
    Route::view('/{path?}', ('layouts.app'))->where('path', '.*');
});

这是我使用 vue 路由器的路线

export const routes = [
    {
        path: '/',
        component: require('./components/Page/HomePage').default,
    },
    {
        path: '/product',
        component: require('./components/Page/Product/ProductPage').default,
    },
];

我需要我的网址

http://localhost/en

而不是（带有主题标签）

http://localhost/en#/

使用历史模式后，我成功删除了主题标签。但是，其他的路由器链接将在我的 url 中删除我的语言环境

http://localhost/product

我现在不知道该怎么办。请帮忙~谢谢。

2020 年 3 月 19 日更新

Answer 1

您需要设置该base值以告诉 Vue Router 应用程序的基本 URL 是什么。在您的情况下，您可以使用语言环境值动态设置它。

例如，在您的 Blade 模板中，您可以使用以下脚本来设置 JavaScriptwindow对象的区域设置值：

<script>
    window._locale = "{{ app()->getLocale() }}";
</script> 

然后您可以base在创建路由器时将值设置为区域设置：

router: new VueRouter({
  mode: 'history',
  base: `/${window._locale}/`,
  routes
})