Есть ли способ передачи данных с одной страницы на другую с помощью Vue?

Question

У меня есть страница входа в Vue, но после того, как я войду в систему, мне нужно перенести имя пользователя на его панель управления.Я пробовал разные решения, такие как шина событий, но она не работает.Есть ли другие решения?

Это то, что я уже пробовал:

// In my login page I have this after the user presses login 
bus.$emit('Login', this.Name);

// This is what I have in my dashboard page
created() {
  bus.$on('Login', obj => {
    this.currentName = obj;
  });
}

Я ожидаю, что имя пользователя, которое вводится на странице входа, также будет на странице панели инструментов.

Answer 1

Если вы создаете надежное приложение, vuex - определенно правильный путь.

Если вы только тренируетесь, есть несколько способов получить имя пользователя

1) localStorage - когда пользователь нажимает «Логин», вы можете установить переменную для хранения имени пользователя. Обратите внимание, что это значение останется после регистрации, если вы не удалите его.

при входе в систему

localStorage.setItem('username', this.name)

Вид приборной панели

<span>{{username}}</span>

<script>
 computed: {
   username() {
         return localStorage.getItem('username')
   }
}
</script>

2) параметр маршрутизатора - при переходе к представлению панели мониторинга из представления входа в систему вы добавляете ключ к URL-адресу, содержащему имя пользователя

при входе в систему

this.$router.push({path: '/dashboard', query: {username: this.name }})

на панели приборов

<span>{{username}}</span>

 <script>
  data() {
   return {
       username: ''
    }
 },
created() {
   this.username = this.$route.query.username
}

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

created() {
  bus.$on('Login', ({name}) => {
    this.currentName = name;
  });
}

также обратите внимание, что для использования шины событий необходимо импортировать ее экземпляр, я думаю, что она не работает "из коробки"

import Vue from 'vue'
export const EventBus = new Vue();