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

由于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下直属其他文件都是一一对应的

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

上一篇：nuxt.js做公司官网pc+移动端（1）