Vue路由器 - 在另一个

Question

当尝试用另一条路线替换当前的/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,
      },
    },
  ],
});

login.vue

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

Answer 1

您的问题可能来自重定向，没有必要使用重定向将“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,
      },
    },
  ],
});