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("已登錄，跳轉首頁！")
}

三、連續(xù)使用 $toast

因為 toast是單例的，重復使用之后，前面的會被覆蓋失效

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

開啟多例

Toast.allowMultiple();

Toast 輕提示

到此這篇關于vue this.$toast 失效問題匯總的文章就介紹到這了,更多相關vue this.$toast 失效內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

this.$toast() 了解一下？

Vue中Element的table多選表格如何實現單選
這篇文章主要介紹了Vue中Element的table多選表格如何實現單選，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-07-07
Vue中強制組件重新渲染的正確方法
這篇文章主要介紹了Vue中強制組件重新渲染的正確方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2021-01-01
WebStorm啟動vue項目報錯代碼:1080?throw?err解決辦法
在使用webstorm新建vue項目時常會遇到一些報錯,下面這篇文章主要給大家介紹了關于WebStorm啟動vue項目報錯代碼:1080?throw?err的解決辦法,文中將解決辦法介紹的非常詳細,需要的朋友可以參考下
2023-12-12
實時通信Socket?io的使用示例詳解
這篇文章主要為大家介紹了實時通信Socket?io的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-11-11
vue返回上一頁面時回到原先滾動的位置的方法
這篇文章主要介紹了vue返回上一頁面時回到原先滾動的位置的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12
Vue echarts模擬后端數據流程詳解
在平常的項目中,echarts圖表我們也是使用的非常多的,通常我們從后端拿到數據,需要在圖表上動態(tài)的進行呈現,接下來我們就模擬從后端獲取數據然后進行呈現的方法
2022-09-09
Vue.js教程之計算屬性
Vue.js 的內聯表達式非常方便，但它最合適的使用場景是簡單的布爾操作或字符串拼接。這篇文章給大家介紹了Vue.js教程之計算屬性，非常不錯，感興趣的的朋友一起看看吧
2016-11-11
vue內置指令詳解
指令是Vue模板中最常用的一項功能，它帶有前綴v-，主要職責是當其表達式的值改變時，相應的將某些行為應用在 DOM 上。這篇文章主要介紹了vue內置指令詳解,需要的朋友可以參考下
2018-04-04
Vuex簡單入門
本篇文章主要介紹了初步認識理解Vuex，Vuex就是在一個項目中，提供唯一的管理數據源的倉庫,有興趣的可以了解一下
2017-04-04
解決安裝arco-design-pro-vue失敗問題
這篇文章主要為大家介紹了解決安裝arco-design-pro-vue失敗的問題方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-11-11