VueJS在登录后显示闪屏(不同的登录页面)
VueJS在登录后显示闪屏(不同的登录页面)
提问于 2018-12-14 00:47:44
我有我的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个视图中添加相同的代码。
有没有一种方法可以用合适的或最佳实践的方式做到这一点？
谢谢
回答 1
Stack Overflow用户
发布于 2018-12-14 01:22:41
作为我的评论的后续内容:您可以挂载一个单独的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的位置导入并创建一个组件即可。
在触发路径之前调用函数
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53766526
复制相关文章
相似问题