uni-app ssr onLoad 获取不到路径参数的值

在uni-app SSR（服务器端渲染）环境中，如果你在onLoad生命周期钩子中无法获取到路径参数的值，可能是由于一些常见的配置或代码实现上的问题。在服务器端渲染中，路径参数通常通过URL路由解析来获取。以下是一个示例，展示了如何在uni-app SSR项目中正确获取路径参数。

首先，确保你的项目已经配置了SSR支持，并且路由系统正确设置。

1. 配置路由

假设你有一个页面Detail，需要通过URL路径参数获取某个详情信息，例如/detail/123，其中123是详情ID。

// pages.json
{
  "pages": [
    {
      "path": "pages/detail/detail",
      "style": {
        "navigationBarTitleText": "Detail"
      },
      "script": "pages/detail/detail.vue"
    }
  ],
  "tabBar": {
    // tabBar 配置...
  },
  "easycom": {
    "autoscan": true,
    "custom": {
      "^/detail/(\\d+)$": "pages/detail/detail"  // 路由匹配规则，捕获数字作为参数
    }
  }
}

2. 在页面脚本中获取路径参数

在detail.vue页面中，你可以通过this.$route.params来获取路径参数。

<template>
  <view>
    <text>Detail ID: {{ detailId }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      detailId: ''
    };
  },
  onLoad(options) {
    // 注意：在SSR中，options 可能不包含路径参数，需要从 this.$route.params 获取
    if (process.env.PLATFORM === 'mp-weixin' && this.$route) {
      // 微信小程序等SSR平台，使用 this.$route.params
      this.detailId = this.$route.params[0] || ''; // 根据你的路由配置调整索引
    } else {
      // 非SSR环境，通常 options 包含参数
      this.detailId = options.id || ''; // 假设客户端路由传递了 id 参数
    }
    
    // 或者更通用的方式，直接访问 this.$route.params，假设你配置正确
    this.detailId = this.$route.params.id || '';

    console.log('Detail ID:', this.detailId);
  }
};
</script>

注意事项

• 确保你的SSR框架（如Nuxt.js或其他）正确配置并运行。
• 在onLoad钩子中，根据平台判断使用this.$route.params或options。
• 路由配置中的正则表达式应正确匹配并捕获参数。
• 如果使用自定义SSR框架或工具，请查阅相关文档以获取正确的参数获取方式。

通过上述步骤，你应该能够在uni-app SSR项目中正确获取到路径参数的值。