Vue3中g(shù)etCurrentInstance、頁(yè)面中route和router的獲取實(shí)現(xiàn)方式
getCurrentInstance、頁(yè)面中route和router的獲取方式
getCurrentInstance()
在vue2中，可以通過(guò)this來(lái)獲取組件實(shí)例，但是在vue3的setup函數(shù)中，無(wú)法通過(guò)this獲取到組件實(shí)例，在setup函數(shù)中this的值是undefined，但是vue3提供了getCurrentInstance()來(lái)獲取組件的實(shí)例對(duì)象；
const { ctx,proxy } = getCurrentInstance();
console.log(typeof getCurrentInstance);
console.log(getCurrentInstance(), typeof getCurrentInstance());
console.log(proxy, typeof proxy);
console.log(ctx, typeof ctx);輸出結(jié)果：
可以看出，getCurrentInstance是一個(gè)方法，getCurrentInstance()是一個(gè)對(duì)象，ctx和proxy也是一個(gè)對(duì)象，ctx和proxy是getCurrentInstance()對(duì)象中的一個(gè)屬性，通過(guò)解構(gòu)賦值的方式拿到的，ctx是一個(gè)普通的對(duì)象，而proxy是一個(gè)proxy對(duì)象，兩者里面都可以看到當(dāng)前組件的data值和方法，可以使用proxy[屬性名]去獲取實(shí)例對(duì)象中的數(shù)據(jù)或者調(diào)用對(duì)象中的方法；
getCurrentInstance只能在setup函數(shù)或生命周期鉤子函數(shù)中使用；
ctx對(duì)象和proxy對(duì)象的區(qū)別：
1、從getCurrentInstance方法中解構(gòu)出來(lái)的ctx對(duì)象，只能在開(kāi)發(fā)環(huán)境下使用，生產(chǎn)環(huán)境下ctx將訪(fǎng)問(wèn)不到（不推薦使用）
2、proxy對(duì)象在開(kāi)發(fā)環(huán)境以及生產(chǎn)環(huán)境中都能拿到組件實(shí)例對(duì)象（推薦使用）
獲取組件實(shí)例對(duì)象的方式
1、獲取掛載到全局中的方法
const instance = getCurrentInstance() console.log(instance.appContext.config.globalProperties)
2、利用proxy對(duì)象
const { proxy } = getCurrentInstance() 獲取route和router的方式
- 方法一：通過(guò)getCurrentInstance()方法獲取到組件實(shí)例，從而獲取到route和router
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
proxy.$router.push({ path: "/home" }); // 實(shí)現(xiàn)路由跳轉(zhuǎn)
console.log("獲取當(dāng)前路由---》", proxy.$route)- 方法二：通過(guò)從vur-router中引入useRoute()、useRouter()方法來(lái)獲取到route和router
import { useRoute, useRouter } from 'vue-router'
const router = useRouter();
const route = useRoute();
console.log('當(dāng)前路由：', route)
router.push({ path: "/home" });總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
基于Vue3+IntersectionObserver實(shí)現(xiàn)高性能圖片懶加載
本文詳解 Vue3 中如何使用 IntersectionObserver API 實(shí)現(xiàn)圖片懶加載,核心優(yōu)勢(shì)在于進(jìn)入視口才加載圖片,可顯著提升首屏加載速度、節(jié)省帶寬資源、避免頁(yè)面卡頓,適合多圖列表場(chǎng)景,需要的朋友可以參考下2026-05-05
Vue項(xiàng)目中定義全局變量的幾種常用方法總結(jié)
在項(xiàng)目中經(jīng)常有些函數(shù)和變量是需要復(fù)用,比如說(shuō)網(wǎng)站服務(wù)器地址,從后臺(tái)拿到的用戶(hù)的登錄token,用戶(hù)的地址信息等,這時(shí)候就需要設(shè)置一波全局變量,這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中定義全局變量的幾種常用方法的相關(guān)資料,需要的朋友可以參考下2023-12-12
Vue的route-view子頁(yè)面調(diào)用父頁(yè)面的函數(shù)詳解
這篇文章主要介紹了Vue的route-view子頁(yè)面調(diào)用父頁(yè)面的函數(shù)詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要給大家介紹了關(guān)于vue如何批量引入組件、注冊(cè)和使用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
Element Notification通知的實(shí)現(xiàn)示例
這篇文章主要介紹了Element Notification通知的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
Vue實(shí)現(xiàn)一鍵將HTML導(dǎo)出為圖片的完整教程
在日常開(kāi)發(fā)中,經(jīng)常會(huì)遇到這樣的需求：將頁(yè)面內(nèi)容生成圖片（分享海報(bào)）或者導(dǎo)出報(bào)表截圖,因此本文將教你如何在 Vue 項(xiàng)目中,一鍵將 HTML 內(nèi)容導(dǎo)出為圖片（PNG）,需要的朋友可以參考下2026-03-03
vuejs+element UI點(diǎn)擊編輯表格某一行時(shí)獲取內(nèi)容填入表單的示例
這篇文章主要介紹了vuejs+element UI點(diǎn)擊編輯表格某一行時(shí)獲取內(nèi)容填入表單的示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
element中TimePicker時(shí)間選擇器禁用部分時(shí)間(顯示禁用到分鐘)
這篇文章主要介紹了element中TimePicker時(shí)間選擇器禁用部分時(shí)間(顯示禁用到分鐘)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
Vue3實(shí)現(xiàn)Message消息組件示例
在大多數(shù) web 產(chǎn)品中，全局的 Message 組件占有較大的使用場(chǎng)景，本文主要介紹了Vue3實(shí)現(xiàn)Message消息組件示例，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06
本篇文章主要介紹了通過(guò)命令行生成vue項(xiàng)目框架的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07