快捷導(dǎo)航

Vue3中g(shù)etCurrentInstance、頁面中route和router的獲取實(shí)現(xiàn)方式

更新時(shí)間：2025年04月18日 10:31:10 作者：熬夜胡蘿北

這篇文章主要介紹了Vue3中g(shù)etCurrentInstance、頁面中route和router的獲取實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

getCurrentInstance、頁面中route和router的獲取方式

getCurrentInstance()

在vue2中，可以通過this來獲取組件實(shí)例，但是在vue3的setup函數(shù)中，無法通過this獲取到組件實(shí)例，在setup函數(shù)中this的值是undefined，但是vue3提供了getCurrentInstance()來獲取組件的實(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è)屬性，通過解構(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)出來的ctx對(duì)象，只能在開發(fā)環(huán)境下使用，生產(chǎn)環(huán)境下ctx將訪問不到（不推薦使用）

2、proxy對(duì)象在開發(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的方式

方法一：通過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)

方法二：通過從vur-router中引入useRoute()、useRouter()方法來獲取到route和router

import { useRoute, useRouter } from 'vue-router'
const router = useRouter();
const route = useRoute();
console.log('當(dāng)前路由：', route)
router.push({ path: "/home" });