vue3獲取當(dāng)前路由地址的兩種方法
方法一:
// router的 path: "/user/:uid" <template> <div>user</div> <p>uid: {{ uid }}</p> </template> <script> import { defineComponent } from "vue"; import { useRouter } from "vue-router"; export default defineComponent({ name: "User", setup() { const router = useRouter(); const uid = router.currentRoute.value.params.uid; return { // 返回的數(shù)據(jù) uid, }; }, }); </script>
useRouter()
返回的是object
, 類似于vue2的this.$router
而router.currentRoute
是RefImpl
對(duì)象, 即我們使用ref
返回的對(duì)象, 通過(guò).value
可以訪問(wèn)到當(dāng)前的路由, 類似于vue的this.$route
使用console.log
打印出來(lái)看看
方式二:window.location 可以直接獲取當(dāng)前窗口的路徑
1.window.location.href(當(dāng)前URL)
結(jié)果:http://www.myurl.com:8866/test?id=123&username=xxx
2.window.location.protocol(協(xié)議)
結(jié)果:http
3.window.location.host(域名 + 端口)
結(jié)果:www.myurl.com:8866
4.window.location.hostname(域名)
結(jié)果:www.myurl.com
5.window.location.port(端口)
結(jié)果:8866
6.window.location.pathname(路徑部分)
結(jié)果:/test
7.window.location.search(請(qǐng)求的參數(shù))
結(jié)果:?id=123&username=xxx
setup(){ const router = useRouter(); onMounted(() => { console.log("router",router.currentRoute.value) if(window.location.pathname=="/askQuestions"){ // if(router.currentRoute.value.path=="/askQuestions"){ console.log("消失;;;;;;") document.getElementById("navSearch").style.display="none" } }); }
總結(jié)
到此這篇關(guān)于vue3獲取當(dāng)前路由地址的文章就介紹到這了,更多相關(guān)vue3獲取當(dāng)前路由地址內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue v-for 點(diǎn)擊當(dāng)前行,獲取當(dāng)前行數(shù)據(jù)及event當(dāng)前事件對(duì)象的操作
這篇文章主要介紹了vue v-for 點(diǎn)擊當(dāng)前行,獲取當(dāng)前行數(shù)據(jù)及event當(dāng)前事件對(duì)象的操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09vue-resource post數(shù)據(jù)時(shí)碰到Django csrf問(wèn)題的解決
這篇文章主要介紹了vue-resource post數(shù)據(jù)時(shí)碰到Django csrf問(wèn)題的解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-03-03Vue監(jiān)聽(tīng)某個(gè)元素以外的區(qū)域被點(diǎn)擊問(wèn)題
這篇文章主要介紹了Vue監(jiān)聽(tīng)某個(gè)元素以外的區(qū)域被點(diǎn)擊問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10Vue在頁(yè)面數(shù)據(jù)渲染完成之后的調(diào)用方法
今天小編就為大家分享一篇Vue在頁(yè)面數(shù)據(jù)渲染完成之后的調(diào)用方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09vue3+ts+MicroApp實(shí)戰(zhàn)教程
這篇文章主要介紹了vue3+ts+MicroApp實(shí)戰(zhàn)教程,分別在主應(yīng)用項(xiàng)目(main)和子應(yīng)用(childrenOne,childrenTwo)項(xiàng)目中安裝microApp,本文給大家詳細(xì)講解,需要的朋友可以參考下2022-10-10Vue+Java+Base64實(shí)現(xiàn)條碼解析的示例
這篇文章主要介紹了Vue+Java+Base64實(shí)現(xiàn)條碼解析的示例,幫助大家實(shí)現(xiàn)條碼解析,感興趣的朋友可以了解下2020-09-09Vue+better-scroll 實(shí)現(xiàn)通訊錄字母索引的示例代碼
通訊錄字母索引是常用的一種功能,本文主要介紹了Vue+better-scroll 實(shí)現(xiàn)通訊錄字母索引,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06vue如何監(jiān)聽(tīng)某個(gè)元素的大小變化
這篇文章主要介紹了vue如何監(jiān)聽(tīng)某個(gè)元素的大小變化問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10一文詳解Vue的響應(yīng)式原則與雙向數(shù)據(jù)綁定
使用 Vue.js 久了,還是不明白響應(yīng)式原理和雙向數(shù)據(jù)綁定的區(qū)別?今天,我們就一起來(lái)學(xué)習(xí)一下,將解釋它們的區(qū)別,快跟隨小編一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08