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-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
基于vue的video播放器的实现示例
Feb 19 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
详细聊聊vue中组件的props属性
Nov 02 Vue.js
Vue如何清空对象
Mar 03 Vue.js
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 20 Vue.js
vue递归实现树形组件
Jul 15 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
PHP开发文件系统实例讲解
2006/10/09 PHP
php页面消耗内存过大的处理办法
2013/03/18 PHP
php使用strtotime和date函数判断日期是否有效代码分享
2013/12/25 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
详解CSS样式中的 !important * _ 符号
2021/03/09 HTML / CSS
newxtree.js代码
2007/03/13 Javascript
javascript之querySelector和querySelectorAll使用说明
2011/10/09 Javascript
javascript的回调函数应用示例
2014/02/20 Javascript
JavaScript中操作字符串小结
2015/05/04 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
jQuery使用deferreds串行多个ajax请求
2016/08/22 Javascript
Vue.js基础知识小结
2017/01/13 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
基于vue2框架的机器人自动回复mini-project实例代码
2017/06/13 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
2018/10/19 Javascript
Vue使用axios出现options请求方法
2019/05/30 Javascript
微信小程序全选多选效果实现代码解析
2020/01/21 Javascript
Python图像处理之识别图像中的文字(实例讲解)
2018/05/10 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
tensorflow中tf.reduce_mean函数的使用
2020/04/19 Python
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
DJI大疆德国官方商城:大疆无人机
2018/09/01 全球购物
英国领先的鞋类零售商和顶级品牌的官方零售商:Wynsors
2020/02/17 全球购物
为什么会有内存对齐
2016/10/10 面试题
工艺工程师工作职责
2013/11/23 职场文书
建筑结构施工专业推荐信
2014/02/21 职场文书
2014年商场工作总结
2014/11/22 职场文书
户外活动总结
2015/02/04 职场文书
2015学校年度工作总结
2015/05/11 职场文书
吧主申请感言怎么写
2015/08/03 职场文书