Vue路由器i18n重定向到路由中的重复语言环境答案

【问题标题】：Vue router i18n redirecting to duplicate locale in routeVue路由器i18n重定向到路由中的重复语言环境
【发布时间】：2021-07-29 07:04:49
【问题描述】：

我有一个带有 i18n 的 vue 应用程序，并通过导航卫士进行身份验证。

我的问题是当我跑步时：

 @click="pushRouteTo(`${$i18n.locale}/list/` + f.id)"  

          pushRouteTo(route) {
              try {
                  this.$router.push(route);
              } catch (error) {
                if (!(error instanceof NavigationDuplicated)) {
                    throw error;
                }
              }
          }

我被推送到 example.com/en/en/list/123 而不是 example.com/en/list/123

当我在导航守卫中放置一个调试器时，它说我的 to.path 是“/en/en/list/123” 但我正在推动/en/list/123。怎么会这样？这与我在路由器中的重定向有关吗？

这是我的 router.js：

 import Vue from 'vue';
  import Router from 'vue-router';
  import Home2 from './views/Home2.vue';
  import Login from './views/Login.vue';
  import Register from './views/Register.vue';
  import ErrorLanding from './views/ErrorLanding.vue'
  import Root from "./Root"
  import i18n, { loadLocaleMessagesAsync } from "@/i18n"
  import {
   setDocumentLang
  } from "@/util/i18n/document"

 Vue.use(Router);

 const { locale } = i18n


 export const router = new Router({
   mode: 'history',
   base: '/',
    routes: [
{
      path: '/',
      redirect: locale,
      meta: {authRequired: false},
    },
    {
      path: "/:locale",
      component: Root,
      meta: {authRequired: false},
      children: [
        {
          name: 'Home',
          path: '',
          component: Home2,
          meta: {authRequired: false},
        },
      {
        name: 'Login',
        path: 'login',
        component: Login,
      },
      {
        path: 'register',
        component: Register,
      },
      {
        path: 'lockedpage',
        name: 'lockedpage',
        webpackChunkName: "lockedpage",
        meta: {authRequired: true},
        component: () => import('./views/LockedPage.vue')
       },
       {
       path: '*',
       component: ErrorLanding,
       name: 'NotFound'
       }
     ]
   }
   ],

router.beforeEach((to, from, next) => {
  
  const { locale } = to.params
  const publicPages = [ `/`, `/${locale}`, `/${locale}/`];
  const authRequired = !publicPages.includes(to.path);
  const loggedIn = localStorage.getItem('user');
  
  const redirect = to.path;
  
  loadLocaleMessagesAsync(locale).then(() => {
    setDocumentLang(locale)
  }).then(() => {

    if (authRequired && loggedIn === null) {
      if(to.meta.authRequired === false) {
        debugger;
        next();
      }
        else {
        debugger;
        next({ name: 'Login', query: { redirect: redirect } });
      }
      } else {
        debugger;
        next();
      }
  }) 
  });

【问题讨论】：

标签： authentication vuejs2 vue-router browser-history vue-i18n

【解决方案1】：

这个问题的根源是我的路线中缺少斜线。

 pushRouteTo(`${$i18n.locale}/list/` + f.id)

应该是：

 pushRouteTo(`${/$i18n.locale}/list/` + f.id)

这就是它创建双重语言环境的原因。

【讨论】：