正解

使用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. 锁对象-条件对象-synchronized关键字

    1 import java.util.concurrent.locks.Condition; 2 import java.util.concurrent.locks.Lock; 3 import ja ...

  2. spring生成EntityManagerFactory的三种方式

    spring生成EntityManagerFactory的三种方式 1.LocalEntityManagerFactoryBean只是简单环境中使用.它使用JPA PersistenceProvide ...

  3. KVM配置

    安装依赖包(因最小化安装) [root@slave-master ~]# yum install -y vim wget tree lrzsz gcc gcc-c++ automake pcre pc ...

  4. mysql数据库备份脚本一例

    例子,mysql数据库备份脚本.vim mysql.sh #!/bin/bash DAY=`date +%Y-%m-%d` //日期以年月日显示并赋予DAY变量 SIZE=`du -sh /var/l ...

  5. 【Java】【设计模式】单例设计模式

    思想: 为了避免其他程序过多建立该类对象,先禁止其他程序建立该类对象 为了让其他程序可以访问到该类对象,只好在本类中自定义一个对象 为了方便其他程序对自定义对象的访问,可以对外提供一些访问方式 代码体 ...

  6. mybatis分页插件PageHelper源码浅析

    PageHelper 是Mybaties中的一个分页插件.其maven坐标 <!-- https://mvnrepository.com/artifact/com.github.pagehelp ...

  7. c3p0的使用步骤

    //1.导入c3p0的连个包,和mysql的驱动包//2.配置c3p0.xml的配置文件 <c3p0-config> <!-- 使用默认的配置读取连接池对象 --> <d ...

  8. linux 让.net 控制台后台运行

    命令     nohup 你的shell命令  & 例如    nohup dotnet  MQTTClient.dll & 输入完成后,终端会有提示 这时再按下回车 回到shell命 ...

  9. KrakenD url匹配通配符 url_pattern wildcard

    KrakenD是一个高性能Api网关,  api转发的推荐做法是每个api一个配置项,也就是一个endpoint,其开发者认为api网关和纯粹的L7路由不一样(文章链接). 因此社区版并没有提供通配符 ...

  10. pwnable_start & ciscn_2019_es_2 & ez_pz_hackover_2016 & pwn2_sctf_2016

    花了两天时间做了这四道题,感觉收获很多.但是这种收获感觉写文章写不出自己的思路,就录制了一个视频. pwnable_start 这道题考察了系统调用,shellcode的编写,和动态调试的知识. ci ...