正解

使用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. Android 图片框架

    1.图片框架:Picasso.Glide.Fresco 2.介绍: picasso:和Square的网络库能发挥最大作用,因为Picasso可以选择将网络请求的缓存部分交给了okhttp实现 Glid ...

  2. nodejs代码初探之nodejs启动

    nodejs启动 入口在node_main.cc,解析参数后进入node.cc 中的node::Start() V8::Initialize() //初始化v8SetupProcessObject() ...

  3. 【Linux】【Shell】【text】awk

    基本用法:gawk [options] 'program' FILE ...             program: PATTERN{ACTION STATEMENTS}               ...

  4. 漏洞扫描器-AWVS

    目录 介绍 漏洞扫描 网络爬虫==漏洞分析.验证 主机发现 子域名探测 SQL注入 HTTP头编辑 HTTP监听 介绍 AWVS为Acunetix Web Vulnarability Scanner的 ...

  5. Windows10常用快捷键+cmd常见命令码

    Windows10常用快捷键+cmd常见命令码 1.Ctrl快捷键 Ctrl+C: 复制 Ctrl+V: 粘贴 Ctrl+A: 全选内容 Ctrl+S: 保存 Ctrl+X: 剪切 Ctrl+Z: 撤 ...

  6. JetBrains又出神器啦!Fleet,体验飞一般的感觉

    目录 简介 从eclipse到Fleet Fleet的特性 JetBrains Space 总结 简介 java开发的同学可能对于JetBrains这家公司并不陌生,因为JetBrains号称拥有世界 ...

  7. C++ happens-before 关系是不可传递的

    P0668R4 对此进行了解释 The definition of plain happens-before became unpleasantly complicated with the intr ...

  8. CF1111A Superhero Transformation 题解

    Content 有两个字符串 \(s,t\).规定元音字母只能够变换成元音字母,辅音字母只能够变换成辅音字母.试问 \(s\) 能否经过若干次变换得到 \(t\). 数据范围:\(1\leqslant ...

  9. AJAX get和post请求

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>&l ...

  10. Python+Robot Framework实现UDS诊断自动化测试

    一.环境搭建 1.概述 由于项目需要进行UDS诊断测试,所以对这方面进行了研究学习,网上很少能查询到相关资料,故记录一下UDS自动化测试开发过程,由于保密原则,案例都是Demo,希望能帮到感兴趣的朋友 ...