vue獲取當(dāng)前路由的五種方式示例代碼
更新時(shí)間：2023年08月29日 08:29:22 作者：一沓紙稿
這篇文章主要給大家介紹了關(guān)于vue獲取當(dāng)前路由的五種方式,文中通過(guò)代碼示例介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
第一種
import { defineComponent,ref} from 'vue';
import { useRouter } from 'vue-router';
const router=useRouter
//通過(guò)實(shí)例化useRouter的router對(duì)象中，含有多個(gè)屬性，其中就包含了當(dāng)前路由地址，
console.log('router',router.currentRoute.value.fullPath);第二種
import { getCurrentInstance } from 'vue';
const { proxy }: any = getCurrentInstance();
console.log(proxy.$router.currentRoute.value.fullpath);通過(guò)getCurrentInstance 獲取當(dāng)前的組件實(shí)例，從而通過(guò)其獲取router，然后胡德當(dāng)前路由地址
第三種
import { toRaw} from 'vue';
import { useRouter } from 'vue-router';
let router = useRouter()
console.log(toRaw(router).currentRoute.value.fullPath);
通過(guò)toRaw返回其原始對(duì)象，即將實(shí)例化的router轉(zhuǎn)化為useRouter第四種
import { watch } from 'vue';
import { useRouter } from 'vue-router';
let router = useRouter()
watch(router,(newValue, oldValue) => {
console.log(newValue.currentRoute.value.fullPath);},
{ immediate: true }
);
//這一種寫(xiě)法比較麻煩，但是邏輯比較簡(jiǎn)單，通過(guò)監(jiān)聽(tīng)獲取最新的router對(duì)象，進(jìn)而獲取路由地址，而且在第一次的時(shí)候，就要執(zhí)行監(jiān)聽(tīng)，第五種
import { ref } from 'vue';
import { useRoute } from 'vue-router';
let path=ref("")
const route=useRoute()
path.value=route.path
//這一種最為簡(jiǎn)單，推薦這種總結(jié)
到此這篇關(guān)于vue獲取當(dāng)前路由的五種方式的文章就介紹到這了,更多相關(guān)vue獲取當(dāng)前路由內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue.js劃分組件的方法,需要的朋友可以參考下2017-10-10
又一款MVVM組件 Vue基礎(chǔ)語(yǔ)法和常用指令（1）
這篇文章主要為大家分享了一款MVVM組件，詳細(xì)介紹了Vue基礎(chǔ)語(yǔ)法和常用指令,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
vue3+ts項(xiàng)目中.env配置環(huán)境變量與情景配置方式
本文介紹了如何在Vite中配置環(huán)境變量和不同的運(yùn)行模式,環(huán)境變量文件以.env開(kāi)頭,僅VITE_前綴的變量會(huì)被暴露,開(kāi)發(fā)模式加載.env.development,生產(chǎn)模式加載.env.production,NODE_ENV用于區(qū)分開(kāi)發(fā)和生產(chǎn)環(huán)境2024-10-10
利用Vite搭建Vue3+ElementUI-Plus項(xiàng)目的全過(guò)程
vue3如今已經(jīng)成為默認(rèn)版本了,相信大多數(shù)公司已經(jīng)全面擁抱vue3了,下面這篇文章主要給大家介紹了關(guān)于利用Vite搭建Vue3+ElementUI-Plus項(xiàng)目的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
vue3如何使用postcss-px-to-viewport適配屏幕
這篇文章主要介紹了vue3如何使用postcss-px-to-viewport適配屏幕問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
vue3?圖片懶加載的兩種方式、IntersectionObserver和useIntersectionObserve
這篇文章主要介紹了vue3?圖片懶加載的兩種方式、IntersectionObserver和useIntersectionObserver實(shí)例詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了如何在Vue項(xiàng)目中使用axios處理后端返回的Excel文件流,并提供下載功能,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2025-01-01
Vue2.0 實(shí)現(xiàn)移動(dòng)端圖片上傳功能
本文主要介紹VUE2.0圖片上傳功能的實(shí)現(xiàn)。原理是通過(guò)js控制和input標(biāo)簽的方式完成這一效果，無(wú)需加載其他組件。具體實(shí)例大家大家參考下本文2018-05-05
UniApp中實(shí)現(xiàn)類似錨點(diǎn)定位滾動(dòng)效果
一個(gè)uniapp小程序的項(xiàng)目,我們需要實(shí)現(xiàn)一個(gè)非常實(shí)用的功能——類似于錨點(diǎn)定位的交互效果,即在首頁(yè)中有多個(gè)tab（分類標(biāo)簽）,每個(gè)tab對(duì)應(yīng)著不同的模塊,當(dāng)用戶點(diǎn)擊某個(gè)分類的tab時(shí),需要流暢地滾動(dòng)到對(duì)應(yīng)的內(nèi)容位置,提供更好的用戶體驗(yàn),2023-10-10
uni-popup手寫(xiě)菜鳥(niǎo)上門取件時(shí)間選擇器
這篇文章主要為大家介紹了uni-popup手?jǐn)]了一個(gè)菜鳥(niǎo)上門取件時(shí)間選擇器，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08