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 19 Vue.js
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
vue+django实现下载文件的示例
Mar 24 Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 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 ajax 分页类代码
2008/11/13 PHP
destoon实现VIP排名一直在前面排序的方法
2014/08/21 PHP
浅谈PDO的rowCount函数
2015/06/18 PHP
PHP排序二叉树基本功能实现方法示例
2018/05/26 PHP
webpack常用配置项配置文件介绍
2016/11/07 Javascript
微信小程序 弹幕功能简单实例
2017/02/14 Javascript
jquery网页加载进度条的实现
2017/06/01 jQuery
jQuery表单设置值的方法
2017/06/30 jQuery
详解vue 项目白屏解决方案
2018/10/31 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
2020/07/29 Javascript
微信小程序 WXML节点信息查询详解
2019/07/29 Javascript
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
jQuery实现本地存储
2020/12/22 jQuery
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
[50:48]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
python开发利器之ulipad的使用实践
2017/03/16 Python
使用python实现接口的方法
2017/07/07 Python
python正则表达式re之compile函数解析
2017/10/25 Python
详解Python自建logging模块
2018/01/29 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
PyTorch之图像和Tensor填充的实例
2019/08/18 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
CheapTickets香港机票预订网站:CheapTickets.hk
2019/06/26 全球购物
Loreto Gallo英国:欧洲领先的在线药房
2021/01/21 全球购物
会计实习生自我鉴定
2013/12/12 职场文书
美术教学感言
2014/02/22 职场文书
创建市级文明单位实施方案
2014/03/01 职场文书
项目采购员岗位职责
2014/04/15 职场文书
贷款工资证明范本
2015/06/12 职场文书
初中美术教学反思
2016/02/17 职场文书
golang json数组拼接的实例
2021/04/28 Golang
openGauss数据库JDBC环境连接配置的详细过程(Eclipse)
2022/06/01 Java/Android