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 的 v-model用法实例
Nov 23 Vue.js
在Vue中使用mockjs代码实例
Nov 25 Vue.js
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
Vue ​v-model相关知识总结
Jan 28 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
vue项目支付功能代码详解
Feb 18 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 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
别人整理的服务器变量:$_SERVER
2006/10/20 PHP
浅析get与post的一些特殊情况
2014/07/28 PHP
php实现对象克隆的方法
2015/06/20 PHP
PHP 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
2016/01/04 PHP
PHP四种排序算法实现及效率分析【冒泡排序,插入排序,选择排序和快速排序】
2018/04/27 PHP
javascript之学会吝啬 精简代码
2010/04/25 Javascript
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
2010/08/13 Javascript
jquery实现居中弹出层代码
2010/08/25 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
2013/12/23 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
全面解析Bootstrap表单使用方法(表单控件)
2015/11/24 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
js实现页面跳转的几种方法小结
2016/05/16 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
jQuery实现自动调用和触发某个事件的方法
2016/11/18 Javascript
详解node.js搭建代理服务器请求数据
2017/04/08 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
浅析Vue中method与computed的区别
2018/03/06 Javascript
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
Element-UI中关于table表格的那些骚操作(小结)
2019/08/15 Javascript
[02:34]DOTA2亚洲邀请赛 BG战队出场宣传片
2015/03/09 DOTA
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[04:50]2019DOTA2高校联赛秋季赛四强集锦
2019/12/27 DOTA
Python打印输出数组中全部元素
2018/03/13 Python
TensorFlow Autodiff自动微分详解
2020/07/06 Python
分享一个python的aes加密代码
2020/12/22 Python
python绕过图片滑动验证码实现爬取PTA所有题目功能 附源码
2021/01/06 Python
Linux管理员面试经常问道的相关命令
2013/04/29 面试题
高级方案规划工程师岗位职责
2013/11/29 职场文书
国贸专业个人求职信范文
2014/01/08 职场文书
办公室个人总结
2015/02/28 职场文书
春节慰问简报
2015/07/21 职场文书
python实现过滤敏感词
2021/05/08 Python
Log4j.properties配置及其使用
2021/08/02 Java/Android