起因:扫码后弹窗分城市(北京、上海)区分页面,在进行命名定义时将 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 进行项目配置的时候命名时需注意尽量避免使用下划线命名!以免产生未知的问题!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。