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 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
在Vue中使用mockjs代码实例
Nov 25 Vue.js
vuex的数据渲染与修改浅析
Nov 26 Vue.js
vue实现图片裁剪后上传
Dec 16 Vue.js
Vue实现小购物车功能
Dec 21 Vue.js
vuex的使用和简易实现
Jan 07 Vue.js
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
如何管理Vue中的缓存页面
Feb 06 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 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
浅谈json_encode用法
2015/03/05 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
javascript 页面只自动刷新一次
2009/07/10 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
如何在MVC应用程序中使用Jquery
2014/11/17 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
简单实现JS倒计时效果
2016/12/23 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
使用Python开发windows GUI程序入门实例
2014/10/23 Python
Python中的is和id用法分析
2015/01/26 Python
Python中解析JSON并同时进行自定义编码处理实例
2015/02/08 Python
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
使用python 计算百分位数实现数据分箱代码
2020/03/03 Python
Keras: model实现固定部分layer,训练部分layer操作
2020/06/28 Python
python PyAUtoGUI库实现自动化控制鼠标键盘
2020/09/09 Python
浅析HTML5 meta viewport参数
2020/10/28 HTML / CSS
圣彼得堡鲜花配送:Semicvetic
2020/09/15 全球购物
linux面试题参考答案(2)
2015/12/06 面试题
家长给老师的道歉信
2014/01/13 职场文书
大学生未来职业生涯规划书
2014/02/15 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
大学军训的体会
2014/11/08 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书
毕业实习感受与体会
2015/05/26 职场文书
赢在执行观后感
2015/06/16 职场文书
西部计划志愿者工作总结
2015/08/11 职场文书
浅谈Python numpy创建空数组的问题
2021/05/25 Python
python面向对象版学生信息管理系统
2021/06/24 Python