关于nuxt.js:nuxt国际化之路由部分

37次阅读

共计 1089 个字符,预计需要花费 3 分钟才能阅读完成。

上篇有讲到国际化的根本配置,并不是很全,这篇讲一下,国际化切换的路由变动状况。

正确应用:

1. 文件构造:

|--pages
  |--textA
    |--_lang
        |--_text
            |--index.vue

2.nuxt-link 应用

<nuxt-link
  :to="{name:'textA-lang-text', params: { lang: $store.state.locale ,text:'111'} }"
  class="uk-link-reset"
>
</nuxt-link>

$store.state.locale 获取 store 存储的语言记录
产生的路由:localhost:3000/textA/en/111

其余状况

1,当_lang 文件在最里面,且有可间接承受参数的文件。

|--pages
  |--_lang
    |--index.vue
  |--_textA
    |--index.vue
  |--index.vue
<nuxt-link
  :to="{name:'lang-textA', params: { lang: $store.state.locale ,textA:'111'} }"
  class="uk-link-reset"
>
</nuxt-link>

看一下,具体的路由变动

app.i18n.path = (link) => {if (app.i18n.locale === app.i18n.fallbackLocale) {return `/${link}`
    }

    return `/${app.i18n.locale}/${link}`
  }

当切换到默认语言时,预计路由后果:http://192.168.XX.XXX:3000/111 (_lang 下的 index 文件)
理论路由后果:http://192.168.XX.XXX:3000/111 (_textA 下的 index 文件)
当抉择默认语言时,路由挂载的参数,第一个 lang 会被省略,不会进入_lang 文件,第二个参数会匹配 pages 下承受参数的文件,也就是_textA 文件。

2,当_lang 文件在最里面,且无承受参数的文件。

|--pages
  |--_lang
    |--index.vue
  |--textB
    |--index.vue
  |--index.vue、

当切换到默认语言时,预计路由后果:http://192.168.XX.XXX:3000/111 (_lang 下的 index 文件)
理论路由后果:no found
当抉择默认语言时,路由挂载的参数,第一个 lang 会被省略,不会进入_lang 文件,第二个参数会匹配 pages 下承受参数的文件,然而目前没有承受参数的文件,也没有参数同名的 111 这个文件,所以间接报错。

正文完
 0