Kotlin Multi Platform页面间传递URL导航报错的解决方法

问题出在你直接把包含特殊字符（比如/、%）的URL拼接到路由字符串里，导致Compose Navigation无法正确解析参数，误以为路由路径被拆分成了多个部分，找不到匹配的webview/{url}目的地。

正确的修复步骤： #

1. 定义路由时显式配置参数编码
   在composable函数中，通过arguments指定url参数的类型并开启编码，确保特殊字符不会破坏路由结构：

   composable(
       route = "webview/{url}",
       arguments = listOf(
           navArgument("url") {
               type = NavType.StringType
               encode = true // 关键：开启参数编码，转义URL中的特殊字符
           }
       )
   ) { backStackEntry ->
       val url = backStackEntry.arguments?.getString("url") ?: ""
       WebView(url, navController)
   }
   

2. 导航时安全传递参数
   不要直接字符串拼接URL，改用Uri.encode()手动编码后再拼接，或者使用规范的参数传递方式：

   // 方式1：编码后拼接路由
   navController.navigate("webview/${Uri.encode(news.url.orEmpty())}")
   
   // 方式2：使用NavDeepLinkRequest（更严谨）
   val encodedUrl = Uri.encode(news.url.orEmpty())
   val request = NavDeepLinkRequest.Builder
       .fromUri(Uri.parse("app://your.app.domain/webview/$encodedUrl"))
       .build()
   navController.navigate(request)
   

错误原因解析 #

你原代码中，URL里的/会被Compose Navigation当作路由的层级分隔符，比如webview/https://tw.news.yahoo.com/...会被解析成webview、https:、tw.news.yahoo.com等多个路径段，但你的导航图里只有webview/{url}这一个单层级路由，自然找不到匹配的目的地。编码后，URL的特殊字符会被转义，导航系统会把整个编码后的字符串当作url参数的值，而非拆分路由。

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