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}    },  ]})