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的mixin策略
Nov 19 Vue.js
vue element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
如何优化vue打包文件过大
Apr 13 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 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 和 XML: 使用expat函数(二)
2006/10/09 PHP
php中存储用户ID和密码到mysql数据库的方法
2013/02/06 PHP
yii2.0实现pathinfo的形式访问的配置方法
2016/04/06 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
php使用json-schema模块实现json校验示例
2019/09/28 PHP
javascript同步Import,同步调用外部js的方法
2008/07/08 Javascript
关于jQuery中的end()使用方法
2011/07/10 Javascript
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
使用js操作cookie的一点小收获分享
2013/09/03 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
2013/10/29 Javascript
JS小功能(button选择颜色)简单实例
2013/11/29 Javascript
ie 7/8不支持trim的属性的解决方案
2014/05/23 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
日常收集整理的JavaScript常用函数方法
2015/12/10 Javascript
Vue.js 表单校验插件
2016/08/14 Javascript
ES6新特性之变量和字符串用法示例
2017/04/01 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
Angular4学习笔记之实现绑定和分包
2017/08/01 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
JAVA面试题 static关键字详解
2019/07/16 Javascript
layui使用数据表格实现购物车功能
2019/07/26 Javascript
初步解析Python中的yield函数的用法
2015/04/03 Python
python Django批量导入数据
2016/03/25 Python
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
Python的多维空数组赋值方法
2018/04/13 Python
Python中Numpy mat的使用详解
2019/05/24 Python
Django框架 Pagination分页实现代码实例
2019/09/04 Python
Python实现搜索算法的实例代码
2020/01/02 Python
零基础小白多久能学会python
2020/06/22 Python
一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃
2020/11/02 Python
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
成都思必达公司C#程序员招聘面试题
2013/06/26 面试题
代领学位证书毕业证书委托书
2014/09/30 职场文书
SQL Server2019数据库备份与还原脚本,数据库可批量备份
2021/11/20 SQL Server