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對象, 即我們使用ref返回的對象, 通過.value可以訪問到當(dāng)前的路由, 類似于vue的this.$route
使用console.log打印出來看看
方式二：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（請求的參數(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue項目中keepAlive的使用說明(超級實(shí)用版)
這篇文章主要介紹了Vue項目中keepAlive的使用說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue3父子組件傳參有關(guān)sync修飾符的用法詳解
這篇文章主要給大家介紹關(guān)于前端Vue3父子組件傳參有關(guān)sync修飾符的用法詳細(xì)解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助2021-09-09
這篇文章主要介紹了Vuex中的Mutation使用詳解,當(dāng)我們想修改狀態(tài)值,想傳入的值進(jìn)而進(jìn)行修改時,你可以向 store.commit 傳入額外的參數(shù),即 mutation 的 載荷,需要的朋友可以參考下2023-11-11
Vue通過getAction的finally來最大程度避免影響主數(shù)據(jù)呈現(xiàn)問題
這篇文章主要介紹了Vue通過getAction的finally來最大程度避免影響主數(shù)據(jù)呈現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04
keep-alive是Vue提供的一個抽象組件,用來對組件進(jìn)行緩存,從而節(jié)省性能,下面這篇文章主要給大家介紹了關(guān)于vue?Keep-alive組件緩存的簡單使用,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue中如何刪除字符串中的空格符方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
Vue-Cli如何在index.html中進(jìn)行環(huán)境判斷
這篇文章主要介紹了Vue-Cli如何在index.html中進(jìn)行環(huán)境判斷問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue屏幕自適應(yīng)三種實(shí)現(xiàn)方法詳解
在實(shí)際業(yè)務(wù)中，我們常用圖表來做數(shù)據(jù)統(tǒng)計，數(shù)據(jù)展示，數(shù)據(jù)可視化等比較直觀的方式來達(dá)到一目了然的數(shù)據(jù)查看，但在大屏開發(fā)過程中，常會因?yàn)檫m配不同屏幕而感到困擾，下面我們來解決一下這個不算難題的難題2022-11-11
這篇文章主要介紹了vue如何判斷dom的class,vue點(diǎn)擊給dom添加class然后獲取含有class的dom文件，具體內(nèi)容詳情大家參考下本文2018-04-04
這篇文章主要介紹了淺談vue項目打包優(yōu)化策略，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09