如何在Nuxt 2 + Capacitor应用中使用appUrlOpen实现深度链接

问题描述 #

我想给基于Nuxt的Capacitor应用添加深度链接配置，了解到需要使用以下代码示例：

App.addListener('appUrlOpen', function (event: URLOpenListenerEvent) {
  // Example url: https://beerswift.app/tabs/tabs2
  // slug = /tabs/tabs2
  const slug = event.url.split('.app').pop();

  // We only push to the route if there is a slug present
  if (slug) {
    router.push({
      path: slug,
    });
  }
});

但我的项目使用的是Nuxt2而非vue-router，我曾考虑将addListener添加到nuxt.config.js中，但未找到可行方案，请问该如何实现？

解决方案 #

Nuxt 2中不能直接在nuxt.config.js里挂载Capacitor的事件监听，需要借助客户端插件来实现——因为要访问Nuxt内置的路由实例，且Capacitor API只能在客户端环境运行。

1. 创建Capacitor深度链接插件

在项目的plugins目录下新建capacitor-deeplink.js文件，写入以下代码：

import { App } from '@capacitor/app'

export default ({ app }) => {
  // 仅在客户端执行，避免服务端渲染报错
  if (process.client) {
    App.addListener('appUrlOpen', (event) => {
      // 从深度链接中提取路由路径（根据你的域名调整分割规则）
      const slug = event.url.split('.app').pop()
      
      if (slug) {
        // Nuxt 2通过app.router访问路由实例，替代vue-router的router.push
        app.router.push({
          path: slug
        })
      }
    })
  }
}

2. 在Nuxt配置中注册插件

打开nuxt.config.js，找到plugins数组，添加刚才创建的插件并指定为客户端模式：

export default {
  // 其他配置...
  plugins: [
    // 你的其他插件
    { src: '@/plugins/capacitor-deeplink.js', mode: 'client' }
  ]
}

注意事项

• 必须完成Capacitor原生端的深度链接配置：iOS需修改Info.plist添加关联域名，Android需修改AndroidManifest.xml配置intent过滤器，这部分是原生层的必要配置，否则深度链接无法触发。
• 如果你的深度链接域名不是.app后缀，要调整代码中的split('.app')部分，比如用你的实际域名后缀，比如.com就改成split('.com')。
• 测试深度链接必须使用真机或模拟器，浏览器环境下Capacitor的appUrlOpen事件不会触发。

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