微信小程序页面跳转：绝对路径与相对路径详解

举例

代码结构

index和list是同一级，都在page目录下

app.json配置的page内容

{
  "pages": [
    "pages/index/index",    
    "pages/cate/cate",    
    "pages/cart/cart",
    "pages/profile/profile",    
    "pages/list/list"
  ],
  "window": {
    "navigationBarTitleText": "阅然止尚",
    "navigationBarBackgroundColor": "#f3514f",
    "enablePullDownRefresh": true,
    "backgroundColor": "#efefef",
    "backgroundTextStyle": "dark"
  },

  "tabBar": {
    "selectedColor": "#ff0000",
    "color": "#666",
    "backgroundColor": "#efefef",
    "borderStyle":"black",
    "list":[
      {
        "text": "首页",
        "pagePath": "pages/index/index",
        "iconPath": "/assets/tabbar/index.png",
        "selectedIconPath": "/assets/tabbar/index-active.png"
      },
      {
        "text": "分类",
        "pagePath": "pages/cate/cate",
        "iconPath": "/assets/tabbar/cate.png",
        "selectedIconPath": "/assets/tabbar/cate-active.png"
      },
      {
        "text": "购物车",
        "pagePath": "pages/cart/cart",
        "iconPath": "/assets/tabbar/cart.png",
        "selectedIconPath": "/assets/tabbar/cart-active.png"
      },
      {
        "text": "我的",
        "pagePath": "pages/profile/profile",
        "iconPath": "/assets/tabbar/profile.png",
        "selectedIconPath": "/assets/tabbar/profile-active.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

绝对路径和相对路径都可以

<!-- 绝对路径 -->
<navigator url="/pages/list/list">到商品列表页面</navigator>
<!-- 相对路径 -->
<navigator url="../list/list">到商品列表页面</navigator>

在微信小程序中使用 navigator 组件进行页面跳转时，若目标页面路径为绝对路径，则必须在路径前添加斜线 [/](file://D:\workspace\wx\read-1\app.js)，否则可能会导致页面跳转失败或路径解析错误。

例如，如果在 [app.json](file://D:\workspace\wx\read-1\app.json) 中配置的页面路径是 "pages/list/list"，那么在使用 navigator 跳转时，应写成：

<navigator url="/pages/list/list">跳转到列表页</navigator>

原因说明：

• 微信小程序中的页面路径有两种写法：
  • 绝对路径：以 [/](file://D:\workspace\wx\read-1\app.js) 开头，从项目根目录开始查找。
  • 相对路径：不以 [/](file://D:\workspace\wx\read-1\app.js) 开头，相对于当前页面路径查找。
• 如果你明确知道目标页面在全局 [app.json](file://D:\workspace\wx\read-1\app.json) 的 pages 配置中是以 "pages/list/list" 形式存在，那么使用绝对路径 /pages/list/list 是正确的做法。

注意事项：

1. 页面路径必须严格按照 [app.json](file://D:\workspace\wx\read-1\app.json) 中配置的路径书写。
2. 使用绝对路径时务必加上开头的 [/](file://D:\workspace\wx\read-1\app.js)。
3. 若使用相对路径，请确保路径正确，避免页面找不到。

示例代码：

<!-- 正确写法 -->
<navigator url="/pages/list/list">跳转到列表页</navigator>

<!-- 错误写法（可能导致路径解析失败） -->
<navigator url="pages/list/list">错误示例</navigator>