快捷導(dǎo)航

vue3獲取當(dāng)前路由地址

更新時(shí)間：2022年01月05日 10:09:58 作者：忞翛

本文詳細(xì)講解了vue3獲取當(dāng)前路由地址的方法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

正解

使用useRouter:

// 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)文章

Vue PostCSS的使用介紹
postcss一種對(duì)css編譯的工具，類似babel對(duì)js的處理，postcss只是一個(gè)工具，本身不會(huì)對(duì)css一頓操作，它通過插件實(shí)現(xiàn)功能，autoprefixer就是其一
2023-02-02
Vue組件如何自動(dòng)按需引入詳析
剛學(xué)vue時(shí)候?qū)τ谌纸M件和局部組件有點(diǎn)懵,不知道什么時(shí)候用全局,什么時(shí)候用局部,下面這篇文章主要給大家介紹了關(guān)于Vue組件如何自動(dòng)按需引入的相關(guān)資料,需要的朋友可以參考下
2021-12-12
Vue Router去掉url中默認(rèn)的錨點(diǎn)#
vue-router默認(rèn)hash模式——使用URL的hash來模擬一個(gè)完整的URL，于是當(dāng)URL改變時(shí)，頁面不會(huì)重新加載。這篇文章主要介紹了Vue Router去掉url中默認(rèn)的錨點(diǎn)#,需要的朋友可以參考下
2018-08-08
Vue實(shí)現(xiàn)簡(jiǎn)單網(wǎng)頁計(jì)算器
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單網(wǎng)頁計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
vue-cli瀏覽器實(shí)現(xiàn)熱更新的步驟
這篇文章主要介紹了vue-cli-瀏覽器實(shí)現(xiàn)熱更新,最常用的是webpack-dev-server，它是一個(gè)小型的Node.js?Express服務(wù)器，它使用webpack-dev-middleware來服務(wù)于webpack的包，本文結(jié)合實(shí)例代碼介紹的非常詳細(xì)，需要的朋友參考下吧
2024-03-03
vue實(shí)現(xiàn)全屏滾動(dòng)效果（非fullpage.js）
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)全屏滾動(dòng)效果，非fullpage.js，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-03-03
Vue基礎(chǔ)popover彈出框編寫及bug問題分析
這篇文章主要為大家介紹了Vue基礎(chǔ)popover彈出框編寫及bug問題分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
vueCl如何查看打包后文件的大小占比
這篇文章主要介紹了vueCl如何查看打包后文件的大小占比問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
js數(shù)組的 entries() 獲取迭代方法
這篇文章主要介紹了js數(shù)組的 entries() 獲取迭代方法，entries() 方法返回一個(gè)數(shù)組的迭代對(duì)象，該對(duì)象包含數(shù)組的鍵值對(duì) (key/value)。下面來詳細(xì)介紹該neural,需要的朋友可以參考一下
2021-10-10
詳解vue大文件視頻切片上傳的處理方法
前端上傳大文件、視頻的時(shí)候會(huì)出現(xiàn)超時(shí)、過大、很慢等情況,為了解決這一問題,跟后端配合做了一個(gè)切片的功能,接下來就詳細(xì)的給大家介紹一下vue大文件視頻切片上傳的處理方法,需要的朋友可以參考下
2023-08-08