Fix #259 : fix some problems of example prtoject lazy-loading/webpack (#278)

fix these problems:
1. return 404 when user directly access page or refresh page if current page's path is not '/'
2. jump to default home page when directly access a specific language page
3. jump to default home page in some case when switch the language label

do also:
1. redirect to default home page when access a specific language page that does not exit

Author: PeterAlfredLee

examples/lazy-loading/webpack/src/App.vue

@@ -35,7 +35,7 @@ export default defineComponent({
     // when change the locale, go to locale route
     watch(locale, val => {
       router.push({
-        name: route.name,
+        name: router.currentRoute._rawValue.name,
         params: { locale: val }
       })
     })

examples/lazy-loading/webpack/src/i18n.js

@@ -28,6 +28,9 @@ export async function loadLocaleMessages(i18n, locale) {
     const messages = await import(
       /* webpackChunkName: "locale-[request]" */ `./locales/${locale}.json`
     )
+
+    // set locale and locale message
     i18n.global.setLocaleMessage(locale, messages.default)
+    setI18nLanguage(i18n, locale)
   }
 }

examples/lazy-loading/webpack/src/router.js

@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import { setI18nLanguage, loadLocaleMessages } from './i18n'
+import { loadLocaleMessages } from './i18n'
 
 import Home from './pages/Home.vue'
 import About from './pages/About.vue'
@@ -35,18 +35,15 @@ export function setupRouter(i18n) {
 
   // navigation guards
   router.beforeEach((to, from, next) => {
-    const locale = to.params.locale
+    const paramsLocale = to.params.locale
 
-    // check locale
-    if (!SUPPORT_LOCALES.includes(locale)) {
-      return false
+    // use locale if paramsLocale is not in SUPPORT_LOCALES
+    if (!SUPPORT_LOCALES.includes(paramsLocale)) {
+      return next(`/${locale}`)
     }
 
-    // load locale messages
-    loadLocaleMessages(i18n, locale)
-
-    // set i18n language
-    setI18nLanguage(i18n, locale)
+    // load locale messages and set i18n language
+    loadLocaleMessages(i18n, paramsLocale)
 
     return next()
   })

examples/lazy-loading/webpack/webpack.config.js

@@ -69,6 +69,7 @@ module.exports = (env = {}) => ({
     hot: true,
     stats: 'minimal',
     contentBase: __dirname,
-    overlay: true
+    overlay: true,
+    historyApiFallback: true  // 404s will fallback to /index.html
   }
 })