SwiftUI中NavigationLink结合路由时登出功能失效的问题求助

问题原因 #

当通过NavigationLink跳转到ProfileSettings页面后，NavigationStack的导航栈会压入这个新页面。此时即便isUserLoggedIn状态变为false、Router视图切换到了LoginView，导航栈的栈顶仍是ProfileSettings，导致用户看不到登录页，必须手动返回才能触发视图更新。

解决方案 #

方案1：用导航路径绑定管理整个栈 #

通过给NavigationStack绑定路径变量，登出时直接清空导航栈，让视图回到根节点。

1. 修改RouterViewModel，添加导航路径和登出逻辑：

import SwiftUI

class RouterViewModel: ObservableObject {
    @Published var isUserLoggedIn: Bool = false
    @Published var isLoading: Bool = false
    @Published var navigationPath = NavigationPath()

    func logout() {
        isLoading = true
        // 模拟登出接口请求逻辑
        DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
            self.isUserLoggedIn = false
            self.navigationPath.removeLast(self.navigationPath.count) // 清空导航栈
            self.isLoading = false
        }
    }
}

2. 修改JobMatchApp，绑定导航路径：

@main
struct JobMatchApp: App {
    @StateObject private var vm = RouterViewModel()

    var body: some Scene {
        WindowGroup {
            NavigationStack(path: $vm.navigationPath) {
                Router()
            }
            .environmentObject(vm)
        }
    }
}

3. 替换原来的NavigationLink为路径跳转，并在Router中添加目标视图映射：

// 原NavigationLink替换为Button触发路径跳转
Button {
    routerVM.navigationPath.append("ProfileSettings")
} label: {
    Image(systemName: "gearshape")
        .renderingMode(.template)
        .resizable()
        .frame(width: 24, height: 24)
        .foregroundStyle(.mintGreen)
}

// 在Router的body中添加导航目标映射
struct Router: View {
    @EnvironmentObject var routerVM: RouterViewModel
    
    var body: some View {
        VStack {
            if routerVM.isUserLoggedIn {
                TabbarView()
            } else {
                LoginView()
            }
        }
        .overlay {
            if routerVM.isLoading {
                VStack {
                    ProgressView()
                        .tint(.mintGreen)
                        .scaleEffect(1.5)
                }
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(.deepNavy)
            }
        }
        .navigationDestination(for: String.self) { path in
            if path == "ProfileSettings" {
                ProfileSettings().toolbar(.hidden)
            }
        }
    }
}

方案2：在子页面监听登录状态并弹出栈 #

如果不想修改原有导航结构，可以在ProfileSettings中监听登录状态变化，登出时直接弹出到根视图：

struct ProfileSettings: View {
    @EnvironmentObject var routerVM: RouterViewModel
    @Environment(\.navigationStack) private var navigationStack

    var body: some View {
        // 你的设置页面内容
        Text("Profile Settings")
            .onChange(of: routerVM.isUserLoggedIn) { newValue in
                if !newValue {
                    navigationStack.popToRoot() // 直接回到根视图
                }
            }
    }
}

注：该方法需要在每个可能的登录后子页面添加监听，适合页面数量较少的场景。

方案3：调整NavigationStack的嵌套层级 #

把NavigationStack放在登录状态判断内部，登出时直接销毁整个导航栈：

1. 修改Router视图：

struct Router: View {
    @EnvironmentObject var routerVM: RouterViewModel
    
    var body: some View {
        if routerVM.isUserLoggedIn {
            NavigationStack {
                TabbarView()
            }
        } else {
            LoginView()
        }
        .overlay {
            if routerVM.isLoading {
                VStack {
                    ProgressView()
                        .tint(.mintGreen)
                        .scaleEffect(1.5)
                }
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(.deepNavy)
            }
        }
    }
}

2. 修改JobMatchApp移除外层NavigationStack：

@main
struct JobMatchApp: App {
    @StateObject private var vm = RouterViewModel()

    var body: some Scene {
        WindowGroup {
            Router()
                .environmentObject(vm)
        }
    }
}

这种方法结构更简洁，适合不需要跨登录状态保留导航栈的场景。

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