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