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

如您所见，登录后我可以拥有不同的登录页面，具体取决于用户角色。我需要做的是，无论用户登陆哪个页面，我都必须在用户登录后显示启动屏幕（模式）。

如果所有页面只有一个着陆页，我想我可以在该视图的mount事件中添加一些内容以显示模式，但是由于我有9个不同的着陆页，因此我认为最好的方法是向其中添加相同的代码9个意见。

有没有办法以适当或最佳实践的方式做到这一点？

谢谢

Answer 1

作为我的评论的后续内容：您可以挂载单独的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上导入并创建组件。
在触发路线之前立即调用该函数

Answer 2

如果您可以将用户定向到9条不同的路线，您可以：

创建模态组件
将其加载到这些视图/路线
在安装路线后将其打开

这种方式将模式代码集中在其自己的组件中，并且可以监视属性更改的出现。

VueJS登录后显示启动屏幕（不同的登录页面）

2 个答案: