VueJS показывает заставку после входа в систему (другая целевая страница)

Question

У меня есть приложение VueJS, в которое пользователь входит и в зависимости от роли в маршрутизаторе проталкивается конкретная целевая страница.

Вот пример кода или хранилище, которое обрабатывает вход:

login({ dispatch, commit, state }, data) {
    return API.post('api/account/login', data).then(({ data }) => {
      if (data.success) {
        var view = getView(data.data, state)
        router.push(view);        
      }
      return Promise.resolve(data);
    });
  },

Итак, как вы можете видеть, у меня могут быть разные целевые страницы после входа в систему в зависимости от роли пользователя.Что мне нужно сделать, так это то, что независимо от того, какая целевая страница есть, я должен показывать заставку (модальный) после входа пользователя в систему.

Если это всего лишь одна целевая страница для всех, я думаю, я мог бы что-то добавить вСобытие монтирования этого представления показывает модальный режим, но поскольку у меня 9 различных видов приземления, я не думаю, что лучший способ - это добавить один и тот же код в 9 видов.

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

Спасибо

Answer 1

Если у вас есть 9 различных маршрутов, на которые может быть направлен пользователь, не могли бы вы:

• создать модальный компонент
• загрузить его в эти виды / маршруты
• откройте его, когда маршрут смонтирован

Таким образом, модальный код централизован в своем собственном компоненте и может наблюдать за появлением изменения свойства.

Answer 2

Как продолжение моего комментария: вы можете смонтировать отдельный экземпляр Vue.Вы можете сделать это примерно так:

createNewInstance: function(){
    const splash = new Vue({
    methods: {
      closeHandler() {
        return function() {
          splash.$destroy();
          splash.$el.remove();
        };
      }
    },
    render(h) {
      return h(YourSplashComponent, {
        mounted() {
          setTimeout(this.closeHandler(), 3000)
        }
      });
    }
  }).$mount();
  document.body.appendChild(splash.$el);
}

Обязательно импортируйте и создайте компонент, в котором в примере указано YourSplashComponent.
Вызовите функцию прямо перед тем, как запустить маршрут