vue3獲取當(dāng)前路由地址的兩種方法

更新時(shí)間：2022年10月13日 09:28:32 作者：菜雞上線

近期在做ve3的項(xiàng)目時(shí)因?yàn)楣δ苄枰?需要獲取當(dāng)前路由的地址,下面這篇文章主要給大家介紹了關(guān)于vue3獲取當(dāng)前路由地址的兩種方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

方法一：

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