耀极客论坛

 找回密码
 立即注册
查看: 634|回复: 0

vue3获取当前路由地址

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220553
发表于 2022-5-7 00:12:21 | 显示全部楼层 |阅读模式
  本文详细讲解了vue3获取当前路由地址的方法,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
正解
  使用useRouter:
  1. // router的 path: "/user/:uid"
  2. ‹template>
  3.   ‹div>user‹/div>
  4.   ‹p>uid: {{ uid }}‹/p>
  5. ‹/template>
  6. ‹script lang="ts">
  7. import { defineComponent } from "vue";
  8. import { useRouter } from "vue-router";
  9. export default defineComponent({
  10.   name: "User",
  11.   setup() {
  12.     const router = useRouter();
  13.     const uid = router.currentRoute.value.params.uid;
  14.     return {
  15.       // 返回的数据
  16.       uid,
  17.     };
  18.   },
  19. });
  20. ‹/script>
复制代码
解释一下
  useRouter()返回的是object, 类似于vue2的this.$router
  而router.currentRoute是RefImpl对象, 即我们使用ref返回的对象, 通过.value可以访问到当前的路由, 类似于vue的this.$route
  使用console.log打印出来看看:

  到此这篇关于vue3获取当前路由地址的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持脚本之家。


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-11-28 19:22 , Processed in 0.077421 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表