正解

使用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. Siebel调用WebService

    Siebel可以调用外部系统的接口,通过WebService的接入方式实现,所在的项目都是通过ESB,其他系统的接口都要经过ESB,由ESB提供WSDL文档,通过Siebel调用. 一.修改Tools ...

  2. window 查看端口占用情况

    查看哪个进程在用 netstat -aon|findstr "8080" TCP    0.0.0.0:8080           0.0.0.0:0              ...

  3. linux系统的一些常用命令

    cd 进入某个目录 ifconfig 查看本机的ip cp (要复制的文件的位置) (要把文件复制的位置) ll 查看文件下,文件的操作权限 ls查看该文件夹下的有那些文件和文件夹 vi filena ...

  4. 正则表达式入门(js版)

    什么是正则表达式 正则表达式 Regular Expression (构造函数 RegExp) 用于字符串匹配规则 要么匹配字符,要么匹配位置 如何新建正则表达式 字面量 /[ab]/gim cons ...

  5. 淘宝网购物车jquery源码和网易新用户注册页面表单验证的练习

    淘宝网购物车源码: <html lang="en"> <head> <meta charset="UTF-8"> <t ...

  6. 两大js移动端调试神器 / 调试工具分享 !

    分享大家一个CDN网站:https://www.bootcdn.cn/ eruda 移动端网页调试工具的使用: <script src="https://cdn.bootcdn.net ...

  7. [BUUCTF]REVERSE——SimpleRev

    SimpleRev 附件 步骤: 例行查壳儿,,无壳,64位程序 64位ida载入,看main函数 关键代码段在Decry函数里 unsigned __int64 Decry() { char v1; ...

  8. [ZJCTF 2019]EasyHeap

    目录 逆向分析 create 函数 edit 函数 delete 函数 利用思路 exp 脚本 get flag 内容来源 逆向分析 -------------------------------- ...

  9. THUSC 2021 游记

    想了想不往博客园放不行,还是放上来了. 原文 \[\texttt{Brief Introduction} \] 众所周知,THUSC2021 5 月 15-16 日在杭州市 XJ 中学举办,然而由于 ...

  10. java 图形化工具Swing 颜色文件选择器 ;JColorChooser;JFileChoose

    使用JColorChooser: JColorChooser用于创建颜色选择器对话框,该类的用法非常简单,该类主要提供了如下两个静态方法: (1),showDialog(Component compo ...