正解

使用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. Linux基础命令---apachectl

    apachectl apachectl指令是apache http服务器的前端控制程序,可以协助控制apache服务的守护进程httpd. 此命令的适用范围:RedHat.RHEL.Ubuntu.Ce ...

  2. OpenStack之之一: 快速添加计算节点

    根据需求创建脚本,可以快速添加节点#:初始化node节点 [root@node2 ~]# systemctl disable NetworkManager [root@node2 ~]# vim /e ...

  3. shell神器curl命令的用法 curl用法实例笔记

    shell神器curl命令的用法举例,如下: ##基本用法(配合sed/awk/grep) $curl http://www.jquerycn.cn ##下载保存 $curl http://www.j ...

  4. Linux安装软件出错

    1.Delta RPMs disabled because /usr/bin/applydeltarpm not installed. yum provides '*/applydeltarpm' # ...

  5. Spring Boot中使用Servlet与Filter

    在Spring Boot中使用Servlet,根据Servlet注册方式的不同,有两种使用方式.若使用的是Servlet3.0+版本,则两种方式均可使用:若使用的是Servlet2.5版本,则只能使用 ...

  6. JS - 事件常用

    问:什么是事件? 答:JS创建动态页面,可以被JS侦测到的行为.网页中的每个元素都可以产生某些可以触发JS函数的事件.比如说,当用户点击按钮时,就发生一个鼠标单击(onclick)事件,需要浏览器做出 ...

  7. 如何将java对象转换成json数据

    package cn.hopetesting.com.test;import cn.hopetesting.com.domain.User;import com.fasterxml.jackson.c ...

  8. python安装imblearn(PackageNotFoundError: ''Package missing in current channels")

    1.imblearn包在anaconda中是没有的,需要在命令行下自行安装,以下两个命令任选一个: 1. conda install -c glemaitre imbalanced-learn2. p ...

  9. C++内存管理:new / delete 和 cookie

    new 和 delete C++的内存申请和释放是通过 new 和 delete 实现的, 而new 和 delete 其实就是通过 malloc 和 free 实现的. new 申请内存分为三个步骤 ...

  10. MySQL如何随机筛选25000条数据

    一.SELECT * FROM sheet1 t1 ORDER BY RAND() LIMIT 10000; 二.SELECT * FROM sheet1 AS t1 JOIN (SELECT ROU ...