nuxt 踩坑分享之 pages 命名

起因：扫码后弹窗分城市（北京、上海）区分页面，在进行命名定义时将 pages 扫码后弹窗下的页面命名为：scan_app_pop 和 scan_app_popsh，然而在页面上线后，发现上海的链接无法正确显示，页面无内容。经排查发现是nuxt router 动态路由的一个问题 ?

Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。
项目中页面目录结构如下图所示，文件中定义红色线框中的两个文件，文件内为不同内容。

该文件生成的对应的路由配置为：

可以看到路由配置中，两个路径后均有一个 :appsh 以及 :appbj 两个参数

在运行时发现两个页面显示的均为第一个页面的内容。

Nuxt.js 文档里有这样的规定：

在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。

由于命名的规范问题，命名时带有下划线，导致 nuxt 按照参数来解析文件名，:appsh 以及 :appbj 表示该路由是可选的。在自动生成路由后，匹配到前面的scan，因此不会匹配后面这一项，位于前面的路由会覆盖后面的路由，导致后面的页面无法显示。

因此在利用 Nuxt.js 进行项目配置的时候命名时需注意尽量避免使用下划线命名！以免产生未知的问题！