vue-router 如何实现 url 中带语言参数,如 https://element.eleme.cn/#/en-US

木槿
  • 339

项目要求支持多语言切换,首先想到的是用 vue-i18n 实现,然后把语言参数比如 zh-CN, en-US 放在 url 中一直携带,如果用 url 参数 ?lang=zh-CN 很简单,但这种体验不好,想要把语言参数作为 url 根路由放在域名后面,比如 https://element.eleme.cn/en-US,此时 en-US 需要在路由配置文件中设置一个根路由了,可是问题来了,多语言会有 en-US, zh-CN, zh-TW 等等,不可能写这么多根路由,所以根路由用一个正则匹配了 path: '/(zh_CN|zh_TW|en-US)', 然后读取匹配的根路径使用 this.$i18n.locale 切换路由。

// routes.js
{
    path: '/(zh_CN|zh_TW)',
    name: 'lang',
    component: resolve => require(['@/views/lang'], resolve),
    children: [
      {
        // 登录
        path: 'signin',
        name: 'signin',
        component: resolve => require(['@/views/login/signin'], resolve),
        meta: { title: '登录' }
      },
      {
        // 注册
        path: 'signup',
        name: 'signup',
        component: resolve => require(['@/views/login/signup'], resolve),
        meta: { title: '注册', requireAuth: false }
      },
   ]
}

比如当前在 /zh_CN/signin 登录页面,此时使用 this.router.push({ name: 'signup' }) 跳转到注册页面,因为用的是 name 方式,所以语言参数并没有携带过来,会跳转到 //signup 路由, 如果用this.router.push({ path: '/zh_CN/signup' }) 也能解决,不过有点麻烦,有没有好的解决方案。

回复
阅读 3k
2 个回答
小邵爷
  • 205
  {
        // 登录
        path: '/:lang/signin',
        name: 'signin',
        component: resolve => require(['@/views/login/signin'], resolve),
        meta: { title: '登录' }
      },

试下:lang这种写法呢,vue不会把这个参数清掉的

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏