Laravel Vue VueRouter历史模式

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

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

我想在历史模式下使用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

而不是（使用hashtag）

使用历史记录模式后，我成功地删除了hashtag。但是，其他的路由器链接将删除我url中的区域设置

http://localhost/product

我不知道现在该怎么处理它。 请帮忙~谢谢

更新日期：2020年3月19日

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

例如，在Blade模板中，可以使用以下脚本设置JavaScript

窗口

对象上的区域设置值：

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

---

非常简单的方法是在Vue路由器中也接受区域设置。所以你的路线是这样的：

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

---

<> >请确保儿童路线不开始“/”，因为它的删除位置< /p>我尝试，但仍然空白页显示与历史模式启用……什么意思？您的问题中没有提到空白页。@BlackLotus我在上为您创建了一个演示。我尝试了您的演示“”，但您的演示也显示空白页，不是吗？非常感谢。这一点非常重要，但遗憾的是，《Vue路由器指南》中并未提及，仅在API参考中提及：

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