vue3获取当前路由地址


Posted in Vue.js onFebruary 18, 2022

正解

使用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 {
      // 返回的数据
      uid,
    };
  },
});
</script>

解释一下

useRouter()返回的是object, 类似于vue2的this.$router

router.currentRouteRefImpl对象, 即我们使用ref返回的对象, 通过.value可以访问到当前的路由, 类似于vue的this.$route

使用console.log打印出来看看:

vue3获取当前路由地址

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

Vue.js 相关文章推荐
vue+element实现动态加载表单
Dec 13 Vue.js
vue 数据操作相关总结
Dec 17 Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
如何管理Vue中的缓存页面
Feb 06 Vue.js
vue项目实现分页效果
Mar 24 Vue.js
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
vue实现拖拽交换位置
Apr 07 Vue.js
vue自定义右键菜单之全局实现
Apr 09 Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 Vue.js
vue实现在data里引入相对路径
Jun 05 Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 #Vue.js
vue项目支付功能代码详解
Feb 18 #Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 #Vue.js
Vue提供的三种调试方式你知道吗
Jan 18 #Vue.js
详解Vue项目的打包方式(生成dist文件)
Jan 18 #Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 #Vue.js
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 #Vue.js
You might like
PHPnow安装服务[apache_pn]失败的问题的解决方法
2010/09/10 PHP
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
关于PHP二进制流 逐bit的低位在前算法(详解)
2013/06/13 PHP
解析php利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
php中并发读写文件冲突的解决方案
2013/10/25 PHP
PHP中使用GD库创建圆形饼图的例子
2014/11/19 PHP
php判断一个数组是否为有序的方法
2015/03/27 PHP
PHP 7安装调试工具Xdebug扩展的方法教程
2017/06/17 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
2011/04/27 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
原生JavaScript实现remove()和recover()功能示例
2018/07/24 Javascript
浅谈小程序 setData学问多
2019/02/20 Javascript
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
jQuery实现图片切换效果
2020/10/19 jQuery
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
python中解析json格式文件的方法示例
2017/05/03 Python
Python中list查询及所需时间计算操作示例
2018/06/21 Python
Random 在 Python 中的使用方法
2018/08/09 Python
Python 3 实现定义跨模块的全局变量和使用教程
2019/07/07 Python
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
英文自荐信
2013/12/19 职场文书
求职面试个人自我评价
2014/02/28 职场文书
网络管理员岗位职责
2014/03/17 职场文书
小学毕业典礼主持词
2014/03/27 职场文书
员工试用期考核自我鉴定
2014/04/13 职场文书
党员志愿者活动总结
2014/06/26 职场文书
2014年体育工作总结
2014/11/24 职场文书
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL
Linux下搭建SFTP服务器的命令详解
2022/06/25 Servers