欢迎来到3672js教程,我们关注js教程、js框架、js代码特效等。

vue this.$toast 失效问题解决方案,

3672Js.Com2024-04-11 02:25 来源:未知 阅读:15233 关注度3

vue this.$toast 失效问题解决方案,


目录
  • 一、未正确安装或引入 Toast 组件
  • 二、路由跳转
  • 三、连续使用 $toast

一、未正确安装或引入 Toast 组件

请确认你是否已经成功安装并引入了 Toast 插件,比如在使用 Element UI 或其他 UI 框架提供的 Toast 功能时,需按照对应的文档引入和注册。

// 以 Element UI 为例
import Vue from 'vue'
import { Toast } from 'element-ui'
Vue.use(Toast)

二、路由跳转

$toast 提示之后,立马就路由跳转走了,用户会看不见提示

if (this.$store.getters.token) {
  this.$toast("已登录,跳转首页!")
  this.$router.replace('/')
}

解决方式,调换一下位置即可

if (this.$store.getters.token) {
  this.$router.replace('/')
  this.$toast("已登录,跳转首页!")
}

三、连续使用 $toast

因为 toast是单例的,重复使用之后,前面的会被覆盖失效

this.$toast("提示一!")
this.$toast("提示二!")

开启多例

Toast.allowMultiple();

Toast 轻提示 

到此这篇关于vue this.$toast 失效问题汇总的文章就介绍到这了,更多相关vue this.$toast 失效内容请搜索3672js教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持3672js教程!

您可能感兴趣的文章:
  • this.$toast() 了解一下?

本站文章为3672js教程网友分享投稿,版权归原作者,欢迎任何形式的转载,但请务必注明出处。同时文章内容如有侵犯了您的权益,请联系我们处理。
评论已被关闭