如何在Ionic项目中实现含多查询参数的深度链接（Deeplink）并配置跳转端点

别担心，带查询参数的Deeplinking配置其实没那么复杂，我一步步给你讲清楚：

1. 路由端点的正确配置（对应你说的第23行） #

首先你要明白：路由端点不需要包含具体的查询参数（mode和oobCode），只需要匹配链接里的路径部分就行。你的链接路径是/auth-handler，那路由配置就这么写：

// app-routing.module.ts 中的路由数组
const routes: Routes = [
  // 其他已有的路由...
  {
    path: 'auth-handler', // 这就是你要在第23行填的端点
    loadChildren: () => import('./auth-handler/auth-handler.module').then(m => m.AuthHandlerPageModule)
    // 如果是单个组件路由，也可以写成 component: AuthHandlerComponent
  }
];

Ionic的路由会自动捕获链接里的查询参数，完全不需要在路径里硬编码它们。

2. 在目标页面获取并处理查询参数 #

当用户通过链接跳转到auth-handler页面后，你可以用Angular的ActivatedRoute来获取mode和oobCode参数，示例代码如下：

// auth-handler.page.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-auth-handler',
  templateUrl: './auth-handler.page.html',
  styleUrls: ['./auth-handler.page.scss'],
})
export class AuthHandlerPage implements OnInit {

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    // 订阅查询参数变化，确保能拿到最新参数
    this.route.queryParams.subscribe(params => {
      const mode = params['mode'];
      const oobCode = params['oobCode'];
      
      // 这里写你的业务逻辑，比如验证oobCode、根据mode执行对应操作
      console.log('收到的mode:', mode);
      console.log('收到的oobCode:', oobCode);
    });
  }

}

3. 配置Capacitor Deeplinks插件（关键步骤） #

如果你用Capacitor打包原生应用，还需要在capacitor.config.ts里配置Deeplinks规则，确保系统能把这个链接导向你的App：

// capacitor.config.ts
import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: '你的AppID',
  appName: '你的App名称',
  webDir: 'www',
  bundledWebRuntime: false,
  plugins: {
    Deeplinks: {
      host: 'dev-testing-app.web.app', // 你的域名
      pathPrefix: '/auth-handler', // 对应路径前缀
      // Android配置
      androidIntentFilter: [
        {
          action: 'android.intent.action.VIEW',
          category: ['android.intent.category.DEFAULT', 'android.intent.category.BROWSABLE'],
          data: {
            scheme: 'https',
            host: 'dev-testing-app.web.app',
            pathPrefix: '/auth-handler'
          }
        }
      ],
      // iOS配置
      iosUniversalLinks: {
        'dev-testing-app.web.app': {}
      }
    }
  }
};

export default config;

4. 额外注意事项 #

• 确保你的域名已经配置了Universal Links所需的验证文件：iOS需要apple-app-site-association，Android需要assetlinks.json，这两个文件要放在域名的根目录下，系统才能确认这个链接属于你的App。
• 测试的时候，不要直接在浏览器里点链接（除非是测试Web端路由），要在真机上测试，或者用模拟器的链接跳转功能。
• 如果参数获取不到，检查一下参数名称的大小写是否和链接里的一致（比如oobCode不要写成oobcode）。

这样配置后，用户点击https://dev-testing-app.web.app/auth-handler?mode=action&oobCode=code就能直接跳转到App内的auth-handler页面，并且你能拿到这两个参数做后续处理啦。

内容的提问来源于stack exchange，提问作者dvbngln