正解

使用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获取当前路由的更多相关文章

  1. 获取vue路由跳转路径

    平时BUG: 在vue中使用element ui 中的导航组件时,使用index作为跳转的路径,单击跳转没有问题,但是当刷新页面是,选项卡的激活 状态就变成初始化的了,起起初想到用获取window.l ...

  2. 路由传值及获取参数,路由跳转,路由检测,this.$route.query和this.$route.params接收参数,HttpGet请求拼接url参数

    配置动态路由参数id: routes: [ // 动态路径参数 以冒号开头 { path: '/user/:id', component: User } ] html路由跳转: <router- ...

  3. react动态路由以及获取动态路由

    业务中会遇到点击列表跳转到详情页, 1.在index.js修改我们的跟组件 新建router2的文件 import React from 'react' import { HashRouter as ...

  4. 在MVC的cshtml视图页获取默认路由下的ID值的方法

    <a href="/user/resume/index/11"> <span class="title bold">我的 @Reques ...

  5. vue获取当前路由

    完整url可以用 window.location.href路由路径可以用 this.$route.path路由路径参数 this.$route.params 例如:/user/:id → /user/ ...

  6. vue3跳转路由3步曲

    import { useRouter } from 'vue-router';   // 1. 引入路由export default {   setup() {      const $router ...

  7. iOS获取当前路由信息

    导入头文件: #import <SystemConfiguration/CaptiveNetwork.h> - (void)currentWifiSSID {    // Does not ...

  8. vue3.x版本路由router跳转+传参

    显示传参模式 get import { useRouter } from 'vue-router'; const router = useRouter(); let skipEdit = (key: ...

  9. vue3 监听路由($route)变化

      setup() {      // ...   },   watch: {     $route(m, n) {       console.log('mm', m)       console. ...

随机推荐

  1. Output of C++ Program | Set 9

    Predict the output of following C++ programs. Question 1 1 template <class S, class T> class P ...

  2. spring boot 启动卡半天

    测试服务器到期,把环境切了,早上过来 ios 和 安卓 都说 测试环境连不上,ps -ef | grep app.jar 查看了一下进程,发现没有启动,于是 重新打包.部署,一顿骚操作后,监控启动日志 ...

  3. linux shell学习之shell流程控制

    在linux shell编程中,流程控制结构与语句,也算是shell脚本中的重点了,不了解的朋友,跟随脚本小编一起来学习下吧. linux控制流结构学习. 一,shell控制流结构 1.控制结构   ...

  4. 【Java多线程】Java 原子操作类API(以AtomicInteger为例)

    1.java.util.concurrent.atomic 的包里有AtomicBoolean, AtomicInteger,AtomicLong,AtomicLongArray, AtomicRef ...

  5. 小程序的事件 bindtap bindinput

    一.bindtap事件 在wxml文件里绑定: <view class='wel-list' bindtap='TZdown'> <image src="/images/w ...

  6. JS - 获取当前的时间,并且转换成年 - 月 - 日格式!

    先获取当前时间,并转换成年月日格式! function getNowFormatDate() { var date = new Date(); var seperator1 = "-&quo ...

  7. 【HarmonyOS】【DevEco Studio】NOTE02 :Create a  “Hello World ”Application

    Author:萌狼蓝天 StudyTime:2021/12/06 Version:3.0 Beta1 包结构 src | --> resource 资源文件目录 | --> layout/ ...

  8. 【C#】【MySQL】C#连接MySQL数据库(一)代码

    C#连接MySQL数据库 准备工作 1.环境安装 安装MySQL For Visual Studio<<点击进入官网下载 第一个要下载安装,第二个下载后将MySQL.data添加到Visu ...

  9. 第三届“传智杯”全国大学生IT技能大赛(初赛A组)题解

    留念 C - 志愿者 排序..按照题目规则说的排就可以.wa了两发我太菜了qwq #include<bits/stdc++.h> using namespace std; const in ...

  10. Mongodb集群调研

    目录 一.高可用集群的解决方案 二.MongoDB的高可用集群配置 三.Mongo集群实现高可用方式详解 四.Sharding分片技术 一.高可用集群的解决方案 高可用性即HA(High Availa ...