正解

使用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. Spring Boot对日志的控制

    一.logback日志技术介绍 Spring Boot中使用的日志技术为logback.其与Log4J都出自同一人,性能要优于Log4J,是Log4J的替代者. 在Spring Boot中若要使用lo ...

  2. 【笔记】草履虫也能看懂的ELK搭建流程

    环境需要 Elasticsearch需要JAVA环境,至少是JDK1.8 elasticsearch 不允许root用户使用,需要新增个elk用户 如果觉得官网下载太慢,可以使用这个 https:// ...

  3. 安全刻不容缓「GitHub 热点速览 v.21.50」

    作者:HelloGitHub-小鱼干 本周最热的事件莫过于 Log4j 漏洞,攻击者仅需向目标输入一段代码,不需要用户执行任何多余操作即可触发该漏洞,使攻击者可以远程控制用户受害者服务器,90% 以上 ...

  4. abp (.net 5)设置默认请求语言为简体中文

    https://docs.microsoft.com/en-us/aspnet/core/fundamentals/localization?view=aspnetcore-5.0 默认有3个prov ...

  5. 3、Linux的Redis安装

    Linux下安装redis 1.Redis下载 [Redis官网下载地址](https://redis.io/download)    进入官网进行下载 wget https://download.r ...

  6. 【死磕Java并发】—–深入分析volatile的实现原理

    通过前面一章我们了解了synchronized是一个重量级的锁,虽然JVM对它做了很多优化,而下面介绍的volatile则是轻量级的synchronized.如果一个变量使用volatile,则它比使 ...

  7. Android App加固原理与技术历程

    App为什么会被破解入侵 随着黑客技术的普及化平民化,App,这个承载我们移动数字工作和生活的重要工具,不仅是黑客眼中的肥肉,也获得更多网友的关注.百度一下"App破解"就有529 ...

  8. 使用 WPF 做个 PowerPoint 系列 基于 OpenXML 解析实现 PPT 文本描边效果

    本文是使用 WPF 做个 PowerPoint 系列的博客,本文来告诉大家如何解析 PPT 里面的文本描边效果,在 WPF 应用中绘制出来,实现像素级相同 背景知识 在开始之前,期望你了解了 PPT ...

  9. [BUUCTF]PWN——[BJDCTF 2nd]secret

    [BJDCTF 2nd]secret 附件 步骤: 例行检查,64位程序,开启了canary和nx 本地试运行一下,看看程序大概的情况,好像是一个什么游戏 64位ida载入,检索程序里的字符串,发现了 ...

  10. BUGKU web刷题记录

    web1 直接F12查看源码,得到flag. web2 直接输入验证码答案,长度被限制,修改可输入长度,提交后得到flag. web3 $what=$_GET['what']; echo $what; ...