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

【问题标题】：Vue router doesn't recognize :lang as a paramVue 路由器无法识别 :lang 作为参数
【发布时间】：2020-06-27 09:27:46
【问题描述】：

我有以下代码：

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 参数放在每个子组件之前，一切正常，但这并不实用。有没有更好的方法来解决这个问题？

【问题讨论】：

标签： javascript vue.js vuejs2 vue-router

【解决方案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 });
 }
});

【讨论】：

感谢您的回复。我不关心 i18n，但就 lang 参数而言，我仍然得到相同的结果:(
如果你想制作多语言网站，我建议你努力使用 i18n。但是，如果您不需要使用它，我会编辑我的答案。

【解决方案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}
    },
  ]
})

【讨论】：