vue3获取当前路由地址

馥琳

正解

使用

1. useRouter

复制代码

:

1. // router的 path: "/user/:uid"
   
2. <template>
   
3.   <div>user</div>
   
4.   <p>uid: {{ uid }}</p>
   
5. </template>
   
6. 
   
7. <script lang="ts">
   
8. import { defineComponent } from "vue";
   
9. import { useRouter } from "vue-router";
   
10. 
    
11. export default defineComponent({
    
12.   name: "User",
    
13.   setup() {
    
14.     const router = useRouter();
    
15.     const uid = router.currentRoute.value.params.uid;
    
16.     return {
    
17.       // 返回的数据
    
18.       uid,
    
19.     };
    
20.   },
    
21. });
    
22. </script>

复制代码

解释一下

1. useRouter()

复制代码

返回的是

1. object

复制代码

, 类似于vue2的

1. this.$router

复制代码

而

1. router.currentRoute

复制代码

是

1. RefImpl

复制代码

对象, 即我们使用

1. ref

复制代码

返回的对象, 通过

1. .value

复制代码

可以访问到当前的路由, 类似于vue的

1. this.$route

复制代码

使用

1. console.log

复制代码

打印出来看看:

到此这篇关于vue3获取当前路由地址的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
                                                        
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！