Laravel Vue VueRouter 历史模式答案

【问题标题】：Laravel Vue VueRouter history modeLaravel Vue VueRouter 历史模式
【发布时间】：2020-06-26 07:11:36
【问题描述】：

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

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

【问题讨论】：

标签： laravel vue.js vuejs2 vue-router

【解决方案1】：

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

例如，在您的 Blade 模板中，您可以使用以下脚本在 JavaScript window 对象上设置语言环境值：

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

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

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

【讨论】：

我试过了，但仍然显示启用历史模式的空白页面..
什么意思？您没有在问题中提及空白页。
@BlackLotus 我在Github为你创建了一个演示。
我试过你的演示 ''localhost/clone/public/en/home'' 但你的演示也显示空白不是吗？
非常感谢。它非常重要，但遗憾的是在 Vue 路由器指南中没有提及，仅在 API 参考中提及：router.vuejs.org/api/#base

【解决方案2】：

非常简单的方法也是接受 Vue 路由器中的语言环境。所以你的路线是这样的：

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

请确保儿童路线不要在开头放置“/”，因为它会删除语言环境

【讨论】：