uniapp根据id显示不同的的页面

UniApp是一个基于Vue.js的跨平台框架，它允许开发者构建一套代码，同时在多个平台上运行，包括Web、iOS、Android等。如果你想根据用户ID显示不同的页面，你可以采用动态路由和条件渲染的方式来实现。

1. **动态路由**: UniApp支持使用动态路径来匹配URL，并通过变量来代表不同的ID。例如，在你的`pages`目录下创建如`user/:userId-detail.vue`这样的文件结构，`userId`就是动态部分，可以根据实际ID动态匹配到对应的页面。

// router.js
import { createRouter } from 'uni-app-router';

const routers = [
  {
    path: '/user/:userId',
    component: () => import('@/views/UserDetail.vue'),
    meta: { requiresAuth: true }
  }
];

const router = createRouter({
  routes: routers
});

export default router;

2. **条件渲染**: 在`UserDetail.vue`组件内部，你可以通过`this.$route.params.userId`获取到ID，并根据这个值决定加载什么样的内容：

<template>
  <view v-if="userId">
    <keep-alive>
      <component :is="getUserComponent"></component>
    </keep-alive>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userId: this.$route.params.userId,
      userComponents: { // 根据ID映射到不同的组件
        '1': 'UserProfileOne.vue',
        '2': 'UserProfileTwo.vue'
        // 更多...
      }
    };
  },
  computed: {
    getUserComponent() {
      return this.userComponents[this.userId] || 'defaultComponent';
    }
  }
};
</script>

在这个例子中，如果用户ID存在并且是预设的键，会显示对应组件，否则显示默认组件。