由于Nuxt.js是依据 pages 目录结构自动生成 vue-router 模块的路由配置。在加上国际化的情况下,需要在pages目录下添加一个_lang文件,文件的目录结构可以参考https://zh.nuxtjs.org/examples/i18n/#codefund_ad
先截个官网的图看看
但是很多项目都包含动态路由,官网给出的例子中并没有对动态路是怎么个配置结构的。
从例子中可以看出,@/pages/about.vue和@/pages/index.vue都是引入pages/_lang下的about.vue和index.vue文件。在pages/_lang下的文件才具体编写页面的代码。于是我们可以这么理解,国际化就是:
1、pages里添加一个_lang文件夹,_lang文件夹下的目录结构和pages下的目录结构一模一样
2、pages下的.vue文件都指向_lang文件夹下对应的.vue文件,文件格式基本如下:
<script>
import Index from'~/pages/_lang/index'
export default Index
</script>
3、pages下除了_lang文件夹的其他结构是用来生成路由配置的,而_lang文件夹下的.vue文件才是真正用来coding展示的页面
下面给出一张图,你能发现左侧的目录结构中,pages/_lang和pages下直属其他文件都是一一对应的
说到这里,有动态路由的国际化目录怎么建立,你有思路了吧?