Vue.js Vue路由器-在替换路由视图时，在另一个路由视图上渲染

当试图用另一个路由替换当前的

/login

路由时，新路由似乎在最后一个路由之上呈现，使其行为异常

router.js

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Main Page',
      component: MainPage,
      redirect: 'front-page',
      children: [
        {
          path: 'front-page',
          name: 'Front page',
          component: FrontPage,
          meta: {
            requireAuth: true,
          },
        },
        {
          path: 'home',
          name: 'Home page',
          component: HomePage,
          meta: {
            requireAuth: true,
          },
        },
      ],
    },
    {
      path: '/profile',
      name: 'Profile page',
      component: UserProfilePage,
      meta: {
        requireAuth: true,
      },
    },
    {
      path: '/login',
      name: 'Login page',
      component: LoginPage,
      meta: {
        requireAuth: false,
      },
    },
    {
      path: '/register',
      name: 'Registration page',
      component: RegistrationPage,
      meta: {
        requireAuth: false,
      },
    },
  ],
});

result() {
  if (this.loginQuery.sessionToken) {
    this.setAuthToken(this.loginQuery.sessionToken);
    this.$router.replace('/front-page');
  }
},

login.vue

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Main Page',
      component: MainPage,
      redirect: 'front-page',
      children: [
        {
          path: 'front-page',
          name: 'Front page',
          component: FrontPage,
          meta: {
            requireAuth: true,
          },
        },
        {
          path: 'home',
          name: 'Home page',
          component: HomePage,
          meta: {
            requireAuth: true,
          },
        },
      ],
    },
    {
      path: '/profile',
      name: 'Profile page',
      component: UserProfilePage,
      meta: {
        requireAuth: true,
      },
    },
    {
      path: '/login',
      name: 'Login page',
      component: LoginPage,
      meta: {
        requireAuth: false,
      },
    },
    {
      path: '/register',
      name: 'Registration page',
      component: RegistrationPage,
      meta: {
        requireAuth: false,
      },
    },
  ],
});

result() {
  if (this.loginQuery.sessionToken) {
    this.setAuthToken(this.loginQuery.sessionToken);
    this.$router.replace('/front-page');
  }
},

---

您的问题可能来自重定向，没有必要使用重定向将“home”设置为默认路由，请尝试以下代码：

const router = new Router({
  mode: 'history',
  routes: [
    {
      name: 'Main Page',
      component: MainPage,
      children: [
        {
          path: '/front-page',
          name: 'Front page',
          component: FrontPage,
          meta: {
            requireAuth: true,
          },
        },
        {
          path: '/',
          name: 'Home page',
          component: HomePage,
          meta: {
            requireAuth: true,
          },
        },
      ],
    },
    {
      path: '/profile',
      name: 'Profile page',
      component: UserProfilePage,
      meta: {
        requireAuth: true,
      },
    },
    {
      path: '/login',
      name: 'Login page',
      component: LoginPage,
      meta: {
        requireAuth: false,
      },
    },
    {
      path: '/register',
      name: 'Registration page',
      component: RegistrationPage,
      meta: {
        requireAuth: false,
      },
    },
  ],
});

---

你在使用导航卫士吗？使用“下一步”功能，您可以确定要解决的路由，并避免“重叠路由”和“瓶颈路由”。是的，我尝试过，但没有成功。