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 的异常处理机制
Nov 30 Vue.js
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
Vue实现多页签组件
Jan 14 Vue.js
一篇文章学会Vue中间件管道
Jun 20 Vue.js
Vue vee-validate插件的简单使用
Jun 22 Vue.js
vue使用echarts实现折线图
Mar 21 Vue.js
vue判断按钮是否可以点击
Apr 09 Vue.js
vue实现Toast组件轻提示
Apr 10 Vue.js
vue打包时去掉所有的console.log
Apr 10 Vue.js
解决vue自定义组件@click点击失效问题
Apr 30 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
乐信RP2100的电路分析和打磨
2021/03/02 无线电
dede全站URL静态化改造[070414更正]
2007/04/17 PHP
PHP获取当前日期和时间及格式化方法参数
2015/05/11 PHP
php类自动加载器实现方法
2015/07/28 PHP
yii框架redis结合php实现秒杀效果(实例代码)
2017/10/26 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
laravel 事件/监听器实例代码
2019/04/12 PHP
php实现微信小程序授权登录功能(实现流程)
2019/11/13 PHP
PHP强制转化的形式整理
2020/05/22 PHP
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
2015/06/05 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
vue-dialog的弹出层组件
2020/05/25 Javascript
微信小程序动态添加分享数据
2017/06/14 Javascript
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
JS开发 富文本编辑器TinyMCE详解
2019/07/19 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
python采用getopt解析命令行输入参数实例
2014/09/30 Python
python下实现二叉堆以及堆排序的示例
2017/09/29 Python
python日期时间转为字符串或者格式化输出的实例
2018/05/29 Python
Python3爬虫爬取英雄联盟高清桌面壁纸功能示例【基于Scrapy框架】
2018/12/05 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
Python-openCV开运算实例
2020/07/05 Python
Python爬虫之Selenium中frame/iframe表单嵌套页面
2020/12/04 Python
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
英国领先的鞋类零售商和顶级品牌的官方零售商:Wynsors
2020/02/17 全球购物
共产党员公开承诺书范文
2014/03/28 职场文书
提取视频中的音频 Python只需要三行代码!
2021/05/10 Python
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server