uni-app vue3在配置pages.json时不支持带有小数点的页面命名

uni-app vue3在配置pages.json时不支持带有小数点的页面命名

项目信息 详细信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 Windows 10
HBuilderX类型 Alpha
HBuilderX版本号 3.4.6
手机系统 Android
手机系统版本号 Android 12
手机厂商 vivo
手机机型 20
页面类型 nvue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

{
    "root": "pages_template/testA",  
    "pages": [{  
        "path": "index.1.5",  
        "style": {  
            "navigationBarTitleText": "详情",  
            "navigationBarBackgroundColor": "#FFFFFF",  
            "navigationBarTextStyle": "black",  
            "backgroundColor": "#FFFFFF"  
        }  
    }]

预期结果：

  • 可以支持小数点命名

实际结果：

  • 在vue2中正常,vue3中报错

bug描述：

  • vue3在配置pages.json时不支持带有小数点的nvue页面名称

Image 1 Image 2 Image 3


更多关于uni-app vue3在配置pages.json时不支持带有小数点的页面命名的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

你这个写法 难道不会会出问题么

更多关于uni-app vue3在配置pages.json时不支持带有小数点的页面命名的实战教程也可以访问 https://www.itying.com/category-93-b0.html


楼主，问题首先没有去复现。 但是您的问题，就算是所谓的BUG，有！那也不是什么问题吧？懒得去所谓的改啊。
因为，您本身的命名规则，就是有问题的。哪有这样命名的啊。
建议规范化命名。

抓到你了 你不如我表达的含蓄

在 uni-app 中，pages.json 文件用于配置页面的路由和页面信息。根据 uni-app 的官方文档和实际使用经验，pages.json 中的页面路径（path）不支持带有小数点的命名。这是因为小数点在某些文件系统和 URL 解析中可能会引起歧义或错误。

解决方案

如果你需要在页面路径中使用类似小数点的符号，可以考虑以下几种替代方案：

  1. 使用下划线 _ 或连字符 - 代替小数点： 例如，将 page.1.2 改为 page_1_2 或 page-1-2。

    {
  "pages": [
    {
      "path": "pages/page_1_2/index",
      "style": {
        "navigationBarTitleText": "Page 1.2"
      }
    }
  ]
}

  2. 使用文件夹结构来表示层级关系： 你可以通过文件夹结构来表示页面的层级关系，而不是在文件名中使用小数点。

    例如，将 page.1.2 改为 page/1/2：

    {
  "pages": [
    {
      "path": "pages/page/1/2/index",
      "style": {
        "navigationBarTitleText": "Page 1.2"
      }
    }
  ]
}

  3. 在页面逻辑中处理小数点： 如果你确实需要在页面路径中使用小数点，可以在页面逻辑中通过参数传递小数点信息，而不是直接在路径中使用小数点。

    例如，使用 page/1.2 作为路径，然后在页面中通过 query 参数获取小数点信息：

    {
  "pages": [
    {
      "path": "pages/page/index",
      "style": {
        "navigationBarTitleText": "Page"
      }
    }
  ]
}

    在页面跳转时传递参数：

    uni.navigateTo({
  url: '/pages/page/index?version=1.2'
});

    在页面中获取参数：

    onLoad(options) {
  const version = options.version; // 1.2
}
回到顶部