vue this.$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 轻提示