如何在Uno Platform WebAssembly中实现URL深度链接？求技术指引

嘿，我来给你拆解一下Uno Platform WebAssembly里实现深度链接的具体思路，其实分几个核心步骤就能搞定，参考那些展示项目的实现逻辑，大概是这么玩的：

1. 先搭好路由基础框架 #

首先得在你的Uno项目里用上内置的Router控件，把页面和对应的URL路径绑定起来。比如在主页面的XAML里这么写：

<Frame x:Name="MainContentFrame">
    <Router Source="/">
        <!-- 首页路由 -->
        <Route Path="/" View="views:HomePage"/>
        <!-- 带参数的动态路由，比如产品详情页 -->
        <Route Path="/product/{productId}" View="views:ProductDetailPage"/>
        <!-- 静态路由，比如设置页 -->
        <Route Path="/settings" View="views:SettingsPage"/>
    </Router>
</Frame>

这里的{productId}是参数占位符，用来匹配动态的URL路径，比如/product/1001这种链接。

2. 拦截浏览器的URL导航行为 #

在WebAssembly环境下，直接修改浏览器地址栏或者点击外部链接会触发页面刷新，这时候得让Uno的路由接管这个行为。你需要在Wasm项目的Program.cs里加一段拦截逻辑：

public static void Main(string[] args)
{
    var app = new App();
    Microsoft.UI.Xaml.Window.Current.Activate();

    // 监听浏览器的导航事件，接管路由处理
    Uno.UI.WebAssemblyRuntime.Navigate += (sender, e) =>
    {
        var relativePath = new Uri(e.Uri).AbsolutePath;
        // 尝试用Uno的Router处理这个路径
        if (Router.TryNavigate(relativePath, RouterNavigationMode.New))
        {
            e.Handled = true; // 阻止浏览器默认的页面刷新行为
        }
    };
}

这样用户输入深度链接时，就不会刷新页面，而是直接跳转到对应的Uno页面。

3. 解析路由里的参数 #

如果你的深度链接带参数（比如/product/1001里的1001），得在目标页面里把参数取出来用。最简单的方式是在页面的OnNavigatedTo方法里获取：

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);
    // 路由参数会以字典形式传递过来
    if (e.Parameter is IDictionary<string, string> routeParams)
    {
        if (routeParams.TryGetValue("productId", out var id))
        {
            // 这里就可以用id加载对应的产品数据了
            LoadProductDetails(id);
        }
    }
}

或者用更简洁的Router.GetRouteParameter方法直接获取：

var productId = Router.GetRouteParameter<string>("productId");

4. 配置Web服务器的Fallback规则 #

这一步很容易被忽略！当用户直接在浏览器地址栏输入深度链接（比如https://your-app.com/product/1001），浏览器会向服务器请求这个路径的资源，但你的Wasm项目只有一个index.html，所以服务器得把所有非文件/非目录的请求都重定向到index.html，让Uno的路由来处理。

比如用IIS的话，在web.config里加这段配置：

<system.webServer>
    <rewrite>
        <rules>
            <rule name="SPA Fallback" stopProcessing="true">
                <match url=".*" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                </conditions>
                <action type="Rewrite" url="/index.html" />
            </rule>
        </rules>
    </rewrite>
</system.webServer>

如果用Netlify、Vercel这类静态托管平台，直接创建一个_redirects文件，内容写：

/* /index.html 200

5. 测试验证 #

完成上面的配置后，就可以测试了：

• 启动Wasm项目，在地址栏输入http://localhost:5000/product/1001，应该直接跳转到产品详情页，并且能正确获取到productId=1001
• 也可以在页面里加个按钮，通过代码触发路由导航，验证内部跳转是否正常：

private void NavigateToProduct(object sender, RoutedEventArgs e)
{
    Router.Navigate("/product/2002");
}

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