动态路由与导航

路由配置（pages.json）

{
  "pages": [
    {
      "path": "pages/detail/:id",
      "style": {
        "navigationBarTitleText": "详情页"
      }
    }
  ]
}

动态路由使用

// 跳转带参数的页面
uni.navigateTo({
    url: `/pages/detail/${id}`
})

// 在详情页获取参数
export default {
    onLoad(options) {
        console.log('页面参数', options.id)
    }
}

路由守卫实现

由于 UniApp 未内置路由守卫，可通过混合模式实现：

// router.js
export const navigateTo = (options) => {
    // 全局前置守卫
    const isLogin = uni.getStorageSync('token')
    if (options.url.includes('/pages/pay') && !isLogin) {
        uni.navigateTo({url: '/pages/login'})
        return
    }
    uni.navigateTo(options)
}