第一種
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)前路由地址文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-646263.html
第三種
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)單,推薦這種
文章來(lái)源:http://www.zghlxwxcb.cn/news/detail-646263.html
到了這里,關(guān)于vue獲取當(dāng)前路由的幾種方式的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!