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

 更新时间:2024年03月27日 09:59:54   作者:北风toto  
这篇文章主要介绍了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 轻提示 

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

您可能感兴趣的文章:

相关文章

  • 详解vue 表单绑定与组件

    详解vue 表单绑定与组件

    这篇文章主要介绍了vue 表单绑定与组件的相关资料,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-03-03
  • 使用Vue开发自己的Chrome扩展程序过程详解

    使用Vue开发自己的Chrome扩展程序过程详解

    这篇文章主要介绍了使用Vue开发自己的Chrome扩展程序过程详解,浏览器扩展程序是可以修改和增强 Web 浏览器功能的小程序。它们可用于各种任务,例如阻止广告,管理密码,组织标签,改变网页的外观和行为等等。,需要的朋友可以参考下
    2019-06-06
  • vue移动端写的拖拽功能示例代码

    vue移动端写的拖拽功能示例代码

    这篇文章主要介绍了vue移动端写的拖拽功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-09-09
  • vue+element项目实时监听div宽度的变化

    vue+element项目实时监听div宽度的变化

    这篇文章主要介绍了vue+element项目里实时监听某个div宽度的变化,然后执行相应的事件,本文结合示例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
    2024-08-08
  • 如何去掉ElementUI Table的hover变色问题

    如何去掉ElementUI Table的hover变色问题

    这篇文章主要介绍了如何去掉ElementUI Table的hover变色问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue项目中请求数据特别多导致页面卡死的解决

    vue项目中请求数据特别多导致页面卡死的解决

    这篇文章主要介绍了vue项目中请求数据特别多导致页面卡死的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue父子组件传值以及单向数据流问题详解

    vue父子组件传值以及单向数据流问题详解

    大家应该都知道父组件可以向子组件通过属性形式传递参数,传递的参数也可以随时随意修改;但子组件不能修改父组件传递过来的参数,所以下面这篇文章主要给大家介绍了关于vue父子组件传值以及单向数据流问题的相关资料,需要的朋友可以参考下
    2021-09-09
  • Vue.js基础知识汇总

    Vue.js基础知识汇总

    Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来。Vue.js和其他库相比是一个小而美的库,作者的主要目的是通过一个尽量简单的 API 产生可反映的数据绑定和可组合的视图组件,感觉作者的思路非常清晰。
    2016-04-04
  • Vue组件通信之父传子与子传父深入探究

    Vue组件通信之父传子与子传父深入探究

    对于vue来说,组件之间的消息传递是非常重要的,用vue可以是要组件复用的,而组件实例的作用域是相互独立,这意味着不同组件之间的数据无法互相引用,一般来说,组件之间可以有几种关系,下面是我对组件之间消息传递的常用方式的总结
    2022-12-12
  • el-upload 文件上传组件的使用讲解

    el-upload 文件上传组件的使用讲解

    Upload 上传文件这个功能是我们在企业实际开发当中使用频率是非常高的这样一个文件上传的功能,element ui组件组也给我们提供了上传的组件,本文给大家介绍el-upload 文件上传组件的使用,感兴趣的朋友跟随小编一起看看吧
    2024-02-02

最新评论