Laravel Vue VueRouter 历史模式

Posted 2023-02-22

【中文标题】Laravel Vue VueRouter 历史模式

【英文标题】：Laravel Vue VueRouter history mode

【发布时间】：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 日更新

【参考方案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,
        ,
        ]
    
];

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