vue獲取當(dāng)前路由的五種方式示例代碼
第一種
import { defineComponent,ref} from 'vue';
import { useRouter } from 'vue-router';
const router=useRouter
//通過實例化useRouter的router對象中,含有多個屬性,其中就包含了當(dāng)前路由地址,
console.log('router',router.currentRoute.value.fullPath);第二種
import { getCurrentInstance } from 'vue';
const { proxy }: any = getCurrentInstance();
console.log(proxy.$router.currentRoute.value.fullpath);通過getCurrentInstance 獲取當(dāng)前的組件實例,從而通過其獲取router,然后胡德當(dāng)前路由地址
第三種
import { toRaw} from 'vue';
import { useRouter } from 'vue-router';
let router = useRouter()
console.log(toRaw(router).currentRoute.value.fullPath);
通過toRaw返回其原始對象,即將實例化的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 }
);
//這一種寫法比較麻煩,但是邏輯比較簡單,通過監(jiān)聽獲取最新的router對象,進(jìn)而獲取路由地址,而且在第一次的時候,就要執(zhí)行監(jiān)聽,第五種
import { ref } from 'vue';
import { useRoute } from 'vue-router';
let path=ref("")
const route=useRoute()
path.value=route.path
//這一種最為簡單,推薦這種總結(jié)
到此這篇關(guān)于vue獲取當(dāng)前路由的五種方式的文章就介紹到這了,更多相關(guān)vue獲取當(dāng)前路由內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue實現(xiàn)跳轉(zhuǎn)接口push 轉(zhuǎn)場動畫示例
今天小編就為大家分享一篇vue實現(xiàn)跳轉(zhuǎn)接口push 轉(zhuǎn)場動畫示例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue實現(xiàn)登錄保存token并校驗實現(xiàn)保存登錄狀態(tài)的操作代碼
這篇文章主要介紹了Vue實現(xiàn)登錄保存token并校驗實現(xiàn)保存登錄狀態(tài),本文通過示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-02-02
Vue使用openlayers實現(xiàn)繪制圓形和多邊形
這篇文章主要為大家詳細(xì)介紹了Vue如何使用openlayers實現(xiàn)繪制圓形和多邊形,文中的示例代碼講解詳細(xì),感興趣的小伙伴快跟隨小編一起動手嘗試一下2022-06-06
vue實現(xiàn)點擊關(guān)注后及時更新列表功能
這篇文章主要介紹了vue實現(xiàn)點擊關(guān)注后及時更新列表功能,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06
淺談vue中關(guān)于checkbox數(shù)據(jù)綁定v-model指令的個人理解
這篇文章主要介紹了淺談vue中關(guān)于checkbox數(shù)據(jù)綁定v-model指令的個人理解,v-model用于表單的數(shù)據(jù)綁定很常見,下面就來詳細(xì)的介紹一下2018-11-11

