Как я могу передавать данные от компонента к другому при перенаправлении в VueJS?

В настоящее время я работаю над формой входа в систему, которая будет перенаправлять пользователя в «/ admin», как только он подключится. Однако, если он попытается ввести «/ admin», не авторизовавшись, он будет перенаправлен на «/ login».

Я хотел бы иметь возможность отображать сообщение о том, почему он здесь (что-то вроде «Вы должны быть подключены, чтобы продолжить»). Я также хотел бы сделать то же самое при вводе «/ login», когда он подключен (в этом случае он будет перенаправлен с сообщением «вы уже вошли в систему»)

Я пытался передать данные разными способами, но почему-то не могу их получить, и я почти уверен, что это потому, что я делаю это неправильно.

Это макет vue «/ admin», который обеспечивает постоянный вход пользователя в систему.

beforeCreate () {
    this.$axios.get('/logged_in')
      .then(response => {
        if (!response.data) { // either returns true or false
          this.$router.replace({ name: 'login', params: { error: 'not_logged' } })
        }
      })
  }

Это форма входа, и "как" я попытался получить содержимое параметров.

created () {
    this.$axios.get('/logged_in')
      .then(response => {
        if (response.data) {
          this.$router.replace({ name: 'admin', params: { error: 'already_loggedin' } })
        }
      })
    console.info(this.$router.params)
  }
}

watch: {
  $route (to, from) {
    console.info(to)
    console.info(from)
  }
}

Из трех console.infos только первый (this.$router.params) действительно отображается в консоли с undefined.

Что я должен делать?

заранее спасибо

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
0
25
1

Ответы 1

Out of 3 console.infos, only the first one (this.$router.params) actually shows up

Скорее всего, это связано с тем, что ваш компонент был отключен после изменения маршрута. Вот почему наблюдатели больше не работают.

О первом console.info, если вы перенаправили сюда из первого компонента с помощью:

this.$router.replace({ name: 'login', params: { error: 'not_logged' } })

Тогда я думаю, что $ route.params должен иметь этот параметр (а не $ router.params).

Также вы можете объявить реквизиты для компонента и передать их из определения маршрута, как описано здесь: https://router.vuejs.org/guide/essentials/passing-props.html#boolean-mode

Уведомление:

When props is set to true, the route.params will be set as the component props.

Другие вопросы по теме