VueJS i18n 路由 404 页面 路由器文件Main.js 文件

如何解决VueJS i18n 路由 404 页面 路由器文件Main.js 文件

理念

让我先告诉你这个想法，用户输入“domain.com”用户将被重定向到“domain.com/en”，默认设置为英语，之后用户可以浏览整个网站，例如到“domain.com/en/about-us/”。

我的问题

我不知道如何为“domain.com/wrong-page”设置路由，其中​​也是我正在等待的全局 i18n 参数或“domain.com/wrong-language/corect” -page”，这样用户就可以获得我想要的合适的 404 页面。

我的设置

路由器文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import i18n from '../i18n'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',redirect: `/${i18n.locale}`
  },{
    path: '/:lang',component: {
      render(c) { return c('router-view') }
    },children: [
      {
        path: '',name: 'Home',component: Home
      },{
        path: 'about',name: 'About',component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
      },{
        path: '/*',name: '404',component: () => import(/* webpackChunkName: "404" */ '../components/404.vue')
      }
    ]
  }
]

const router = new VueRouter({
  mode: 'history',base: process.env.BASE_URL,routes
})


export default router

Main.js 文件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import i18n from './i18n'

import LanguageSwitcher from "@/components/LanguageSwitcher.vue";
import NavigationTopMenu from "./components/NavigationTopMenu.vue";
import Footer from "./components/Footer.vue";

Vue.component('language-switcher',LanguageSwitcher)
Vue.component('navigation-top-menu',NavigationTopMenu)
Vue.component('footer-g',Footer)


Vue.config.productionTip = false

// use beforeEach route guard to set the language
router.beforeEach((to,from,next) => {

  // use the language from the routing param or default language
  let language = to.params.lang;
  if (!language) {
    language = 'en'
  }

  // set the current language for i18n.
  i18n.locale = language
  next()
})

new Vue({
  router,store,i18n,render: h => h(App)
}).$mount('#app')

解决方法

所以，另一位开发人员联系了我，答案很简单，我们可以为 lang 实现一个自定义的正则表达式来限制可以匹配的内容。

:lang

必须

:lang(en|fr|es) 

另一种解决方案是进一步配置导航守卫并重定向到以下错误页面。