// router的 path: "/user/:uid"
<template>
  <div>user</div>
  <p>uid: {{ uid }}</p>
</template>
 
<script lang="ts">
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打印出來看看:

到此這篇關(guān)于vue3獲取當(dāng)前路由地址的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

解決element-ui里的下拉多選框 el-select 時(shí),默認(rèn)值不可刪除問題
這篇文章主要介紹了解決element-ui里的下拉多選框 el-select 時(shí),默認(rèn)值不可刪除問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
詳解在vue使用weixin-js-sdk常見使用方法
這篇文章主要介紹了詳解在vue使用weixin-js-sdk常見使用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-05-05
Vue基本使用之對(duì)象提供的屬性功能
這篇文章主要介紹了Vue基本使用之對(duì)象提供的屬性功能實(shí)例詳解，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2019-04-04
使用axios發(fā)送post請(qǐng)求,將JSON數(shù)據(jù)改為form類型的示例
今天小編就為大家分享一篇使用axios發(fā)送post請(qǐng)求,將JSON數(shù)據(jù)改為form類型的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
vue transition 在子組件中失效的解決
今天小編就為大家分享一篇vue transition 在子組件中失效的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
VUE實(shí)現(xiàn)時(shí)間軸播放組件
這篇文章主要為大家詳細(xì)介紹了VUE實(shí)現(xiàn)時(shí)間軸播放組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
vue項(xiàng)目自適應(yīng)屏幕分辨率實(shí)現(xiàn)步驟
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目自適應(yīng)屏幕分辨率實(shí)現(xiàn)的相關(guān)資料,作為前端人員,為了適配各種型號(hào)的電腦、手機(jī),我們往往離不開屏幕分辨率的適配,需要的朋友可以參考下
2023-09-09
vue實(shí)現(xiàn)登錄注冊(cè)模板的示例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)登錄注冊(cè)模板的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-04-04
vue發(fā)送ajax請(qǐng)求詳解
如何利用vue進(jìn)行AJAX,其它vue本身不支持發(fā)送AJAX請(qǐng)求,需要使用vue-resource（vue1.0版本）或axios（vue2.0版本）第三方插件的支持才行
2018-10-10
Vue.js雙向綁定操作技巧(初級(jí)入門)
這篇文章主要介紹了Vue.js雙向綁定操作技巧(初級(jí)入門)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-12-12