成功回调错误错误：IonicDeeplinkPlugin297951451：TypeError：route.split 不是函数

如何解决成功回调错误错误：IonicDeeplinkPlugin297951451：TypeError：route.split 不是函数

我正在尝试在 ionic 应用程序中打开特定 URL...

打开“常规”URL 的整个设置已经完成并且运行良好，但现在要打开特定 URL。

我在 app.component.ts 中有这个功能：

setupDeepLinks(){
    this.deepLinks.route({
      '/event-detail/:id':EventDetailPage,'/search':SearchPage
    }).subscribe(match => {
      alert(JSON.stringify(match));
    },noMatch => {
      alert(JSON.stringify(noMatch));
    });
  }

关于这个的全部信息，都说这是正确的方法，甚至是来自ionic deepLinking的官方信息...

从 Chrome 打开 DevTools 时出现此错误，但我不知道该怎么做...

我正在使用 ionic6

解决方案

setupDeepLinks(){
    this.deepLinks.route({
      '/:id':'/event-detail','':'/search'
    }).subscribe(match => {
      console.log('Success: ',match);
      const internalPath = `/${match.$route}/${match.$args['id']}`;
      this.zone.run(()=>{
        this.router.navigateByUrl(internalPath);
      });
    },noMatch => {
      console.error('Error: ',noMatch);
    });
  }

实际上这很简单，但我在任何地方都没有找到。

必须像这样构建路由：

'/:id':'/event-detail','':'/search'

当路由需要一个 ID 时，它的数组的第一部分必须像这样：'/:id'，数组的第二部分像这样：'/event-detail'

数组的第二部分是它放在 app-routing.module.ts 上的名称

当路由不需要任何东西时，数组的第一部分必须是空的，数组的第二部分是这样的：'/search'

我希望这对其他人有所帮助。

解决方法

我得到了同样的结果，但是如果您跟随 DevDactic tutorial 并在 YouTube video from 4m 40s 中观看 Simon，您会听到他说显式页面路由在离子 4/5。

他的建议是这样做：

setupDeepLinks(){
    this.deepLinks.route({
      '/event-detail/:id': 'EventDetailPage','/search':SearchPage
    }).subscribe(match => {
      alert(JSON.stringify(match));
    },noMatch => {
      alert(JSON.stringify(noMatch));
    });
  }

代码中的 EventDetailPage 用引号括起来的地方。我发现您指出的错误已停止，但我仍在努力使路线“匹配”。

如果你成功了，请告诉我？

谢谢。

我在使用 ionic 4+ 时遇到了同样的问题，@MarcoRo 和 @Capnross 解决方案不起作用。最重要的是，我有多个带参数的路由。因此，对我有用的解决方法如下所示。

        this.deeplinks.route({
        // this route is intentionally made invalid but it's important 
        //to have the page i.e anyPage in this case as quoted string : "anyPage" . 
       //This is why the plugin throws route.split() not a function error  

       '/:id':"anyPage"
    
      }).subscribe((match) => {

       // route not match so nothing to do here

      },(nomatch) => {
        /* nomatch contains the full object of the incoming url
        so I can easily extract the needed part for navigation 
        and simply use angular router to navigate to it 
        */
     
      this.router.navigateByUrl(nomatch.$link.path)

    });
  })

这个想法是提供一个不会在路由中退出的随机对象。

就像我说的，在对 ionic 4 和 5 进行永久性修复之前，这是可行的。我希望这可以节省一些人的时间，因为我已经花了几个小时才终于破解它。