Laravel5.5+Vue實現中英文切換

一、Laravel端

總體思路:由于使用App::setLocale()只能切換當前頁面語言,無法使語言選項持久化。解決方案是將語言選項保持在Seesion中,通過在web中間件組中注冊SwitchLanguage中間件從Session中獲取選擇的語言,然后利用App::setLocale()實現語言切換。

以下是實現步驟:

1、在config/app.php中配置語言切換選項數組locales:

'locales' => ['en' => 'English', 'zh' => 'Chinese'],

2、定義并實現中間件:php artisan make:middleware?SwitchLanguage


3、在App\Http\Controllers\Controller中實現setLocaleLang函數,并在routes/web.php中添加語言切換路由:


4、在resources中定義全局字典或分類字典,結構如下:


5、在blade中實現切換功能:


6、在blade模板中將當前語言選擇項傳遞給vue組件:


二、vue組件

總體思路:利用第三方組件vue-i18n實現。官網地址:VueI18n

實現步驟:

1、yarn add --dev vue-i18n或npm install --dev vue-i18n

2、在resources/assets/js/app.js中加入i18n引用并掛載到vue根實例上:


3、編寫語言字典:



4、在組件created函數中設置顯示語言


5、在組件中使用語言字典內容:



總結:到此Laravel5.5+vue實現多語言支持已完成,時間比較緊,寫得不夠詳細,請諒解。如有問題,隨時留言。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容