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

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

clipboard.png

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

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

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

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

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

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

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


Mmmy
145 声望14 粉丝

每天都要学习鸭!🦆