Vue 路由器无法识别 :lang 作为参数

Question

我有以下代码：import Router from 'vue-router';let mainRoutes = [    {path: '/first', component: () => import('./pages/First')},        {path: '/second', component: () => import('./pages/Second')},        {path: '/third', component: () => import('./pages/Third')},  ];const router = new Router({  mode: 'history',  base: process.env.BASE_URL,  scrollBehavior() {    return {x: 0, y: 0}  },  routes: [    {        path: '/:lang',        component: () => import('./layouts/Main'),        children: mainRoutes,        meta: {requiresAuth: true, permissions: true}    },    {        path: '*',        component: () => import('@/pages/errors/404')    }  ]})router.beforeEach((to, from, next) => {    if (!to.query.lang) {        to.query.lang= 'ru';        next({ path: to.path, query: to.query });      } else {        next();      }});export default router我想要的是：每次输入某些路由时，我都希望 vue-router 检查它是否具有 lang 参数。如果不是，我希望它在其中放置“ru”，如果是，则继续并显示具有必要语言的页面（i18n 负责的部分）。问题是由于某种原因它不能将 ':lang' 识别为子路由的参数，所以如果我尝试转到 'test.test/ru'，它会返回 lang 参数，但如果我尝试'test.test/ru/first' 它没有看到它并返回 404。万一我把 :lang 参数放在每个子组件之前，一切正常，但这并不实用。有没有更好的方法来解决这个问题？

Answer 1

使用这样的代码，您应该得到您想要的效果。

import Vue from 'vue';

import VueI18n from 'vue-i18n';

import VueRouter from 'vue-router';

import Router from './Router.vue';

import En from './translation/En.vue';

import Ru from './translation/Ru.vue';

Vue.use(VueI18n);

Vue.use(VueRouter);

Vue.use(VueBus);

const messages = {

  en: En,

  ru: Ru,

};

const i18n = new VueI18n({

  fallbackLocale: 'ru',

  locale: 'ru',

  messages,

});

const router = new VueRouter({

  mode: 'history',

  base: process.env.BASE_URL,

  routes: [

    {

      path: '/:lang',

      component: {

        render: (h) => h('router-view'),

      },

      children: [your children route],

});

router.beforeEach((to, from, next) => {

  const { lang } = to.params;

  if (!['en', 'fr'].includes(lang)) {

    return next(i18n.locale);

  }

  if (i18n.locale !== lang) {

    i18n.locale = lang;

  }

  return next();

});

我不确定但没有 i18n 我认为是这样的：

...

router.beforeEach((to, from, next) => {

 const { lang } = to.params;

 if (!['en', 'ru'].includes(lang)) {

  route.params.lang = 'ru';

  router.push({ name: route.name });

 }

});

Answer 2

我终于找到了解决办法！

如果您在主路线中有一些参数，您的子路线不应以“/”符号开头，而应以正确的路线开头，例如

let mainRoutes = [

    {path: 'first', component: () => import('./pages/First')},

    

    {path: 'second', component: () => import('./pages/Second')},

    

    {path: 'third', component: () => import('./pages/Third')},

  

];

const router = new Router({

  mode: 'history',

  base: process.env.BASE_URL,

  scrollBehavior() {

    return {x: 0, y: 0}

  },

  routes: [

    {

        path: '/:lang',

        component: () => import('./layouts/Main'),

        children: mainRoutes,

        meta: {requiresAuth: true, permissions: true}

    },

  ]

})