Blazor Web App (.NET 8)页面切换时JavaScript未执行问题求助

问题根源在于Blazor是单页应用（SPA），路由切换时不会刷新整个页面，你的模板JS代码仅在首次页面加载时执行一次，新路由下的页面元素没有被JS初始化。以下是修复步骤：

1. 重构模板JS代码，封装初始化逻辑 #

修改main.js，将原本只在页面加载时执行的逻辑封装成可重复调用的函数：

(function($) {
    var $window = $(window),
        $body = $('body'),
        $header = $('#header');

    // 封装模板初始化函数，供Blazor路由切换后调用
    window.initTemplate = function() {
        // 清理旧的导航面板和切换按钮，避免重复创建
        $('#navPanel').remove();
        $('.navPanelToggle').remove();

        // 移除预加载状态
        $body.removeClass('is-preload');

        // 重新初始化下拉菜单（先销毁旧实例，避免重复绑定）
        if ($.fn.dropotron) {
            $('#nav > ul').dropotron('destroy');
            $('#nav > ul').dropotron({
                alignment: 'center'
            });
        }

        // 重新创建侧边导航面板
        $('<a href="#navPanel" class="navPanelToggle">Menu</a>').appendTo($header);
        
        $(
            '<div id="navPanel">'
                + '<nav>' + $('#nav').navList() + '</nav>'
                + '<a href="#navPanel" class="close"></a>'
            + '</div>'
        )
        .appendTo($body)
        .panel({
            delay: 500,
            hideOnClick: true,
            hideOnSwipe: true,
            resetScroll: true,
            resetForms: true,
            side: 'right',
            target: $body,
            visibleClass: 'is-menu-visible'
        });
    };

    // 首次页面加载时执行初始化
    $window.on('load', function() {
        setTimeout(window.initTemplate, 100);
    });

})(jQuery);

2. 在Blazor中监听路由变化，触发JS初始化 #

修改App.razor，注入NavigationManager监听路由切换事件，每次路由变更后调用初始化函数：

@inject NavigationManager NavManager
@inject IJSRuntime JSRuntime
@implements IDisposable

<body class="is-preload">
    <div id="wrapper">
        <Routes />
    </div>

    <script src="_framework/blazor.web.js"></script>
    <script src="template/js/jquery.min.js"></script>
    <script src="template/js/jquery.dropotron.min.js"></script>
    <script src="template/js/browser.min.js"></script>
    <script src="template/js/breakpoints.min.js"></script>
    <script src="template/js/util.js"></script>
    <script src="template/js/main.js"></script>
</body>

@code {
    protected override void OnInitialized()
    {
        // 订阅路由变化事件
        NavManager.LocationChanged += OnRouteChanged;
    }

    private async void OnRouteChanged(object sender, LocationChangedEventArgs e)
    {
        // 等待Blazor渲染完新页面元素后，调用JS初始化函数
        await Task.Delay(100);
        await JSRuntime.InvokeVoidAsync("initTemplate");
    }

    // 销毁时取消订阅，避免内存泄漏
    public void Dispose()
    {
        NavManager.LocationChanged -= OnRouteChanged;
    }
}

关键说明 #

• Blazor路由切换是客户端行为，不会触发window.load事件，所以必须主动调用初始化逻辑。
• 每次初始化前清理旧的DOM元素（如navPanel），避免重复创建导致的DOM冗余和事件冲突。
• 使用Task.Delay(100)确保Blazor已经完成新页面的DOM渲染，再执行JS初始化，保证元素存在。

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