Laravel Vue VueRouter 历史模式

Question

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

我想使用具有历史模式的 vue router，但这给我带来了麻烦。

这是我的代码

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 router 的路线

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#/

使用历史模式后，我成功删除了主题标签。但是，其他路由器链接将删除我的网址中的区域设置

http://localhost/product

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

2020 年 3 月 19 日更新

Answer 1

您需要设置base value 告诉 Vue Router 你的应用程序的基本 URL 是什么。根据您的情况，您可以使用区域设置值动态设置它。

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

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

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

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