NativeScript Vue退出登录时如何跳转至Tab外部的登录页？

Hey there! I get exactly what's happening here—when you log out from the Profile tab, the Login page is loading inside the BottomNavigation instead of replacing the entire app view. Let's break down why this happens and fix it step by step.

Why This Is Happening #

Right now, when you call this.$navigateTo(Login) in your Profile component, you're navigating within the child Frame that's wrapped around the Profile tab (the <Frame> inside your <TabContentItem>). That's why the Login page gets nested under the BottomNavigation bar instead of taking over the whole screen.

Solution 1: Navigate Using the Root Frame #

The easiest fix is to use your app's top-most (root) Frame for navigation instead of the child Frame tied to the Profile tab. This will replace the entire view, including the BottomNavigation, with the Login page.

Update your logout method in Profile.vue like this:

import Login from './Login.vue';
import { Frame } from '@nativescript/core';

export default {
  methods: {
    async logout() {
      try {
        await this.tryLogout();
        console.log('LOGING OUT...');
        
        // Use the app's root Frame to navigate to Login
        Frame.topmost().navigate({
          moduleName: './Login', // Adjust the path to match your file structure
          clearHistory: true // Ensures users can't navigate back to the tabs
        });
      } catch (err) {
        this.alert("An error occured!");
      }
    }
  }
}

If you prefer using the component directly instead of moduleName, you can use createComponent (just make sure to import it from @nativescript/vue):

import { createComponent } from '@nativescript/vue';

// Replace the navigate call with this:
Frame.topmost().navigate({
  create: () => createComponent(Login),
  clearHistory: true
});

Solution 2: Reset the App's Root View #

For a more drastic (but equally effective) approach, you can completely reset your app's root view to the Login page. This guarantees no leftover navigation history or nested frames.

Update your logout method like this:

import Login from './Login.vue';
import { Application } from '@nativescript/core';
import { createVuePage } from '@nativescript/vue';

export default {
  methods: {
    async logout() {
      try {
        await this.tryLogout();
        console.log('LOGING OUT...');
        
        // Create a Vue page for Login and set it as the app's root
        const loginPage = createVuePage(Login);
        Application.start({
          page: loginPage,
          clearHistory: true
        });
      } catch (err) {
        this.alert("An error occured!");
      }
    }
  }
}

Key Notes #

• clearHistory: true is critical: This ensures users can't press the back button to return to the BottomNavigation tabs after logging out, which is the expected behavior for a logout flow.
• Double-check your file paths: Make sure the moduleName points correctly to your Login.vue file (e.g., if Login is in a views folder, it would be ./views/Login).

Either of these solutions will get your Login page loading outside the BottomNavigation bar when users log out.

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