Vue router - при замене вида маршрута рендерит поверх другого - PullRequest
Новая
       12

Vue router - при замене вида маршрута рендерит поверх другого

0 голосов
/ 28 мая 2018

При попытке заменить текущий маршрут /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');
  }
},

1 Ответ

0 голосов
/ 28 мая 2018

Ваша проблема может возникнуть из-за перенаправления. Нет необходимости устанавливать «дом» в качестве маршрута по умолчанию с помощью перенаправления, попробуйте код ниже: 

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,
      },
    },
  ],
});
...