nuxt.js做公司官网pc+移动端之国际化下动态路由目录结构(2)

由于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文件,文件格式基本如下:

3、pages下除了_lang文件夹的其他结构是用来生成路由配置的,而_lang文件夹下的.vue文件才是真正用来coding展示的页面

下面给出一张图,你能发现左侧的目录结构中,pages/_lang和pages下直属其他文件都是一一对应的

动态路由结构

说到这里,有动态路由的国际化目录怎么建立,你有思路了吧?

上一篇:nuxt.js做公司官网pc+移动端(1)

你可能感兴趣的:(nuxt.js做公司官网pc+移动端之国际化下动态路由目录结构(2))