正解

使用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. css实现项目中的加载动画

    // =========================================第一个动画 <template> <!-- 这个组件用于 页面下滑到底部时 展示加载动画 -- ...

  2. 【力扣】454. 四数相加 II

    给定四个包含整数的数组列表 A , B , C , D ,计算有多少个元组 (i, j, k, l) ,使得 A[i] + B[j] + C[k] + D[l] = 0. 为了使问题简单化,所有的 A ...

  3. 下载requests库

    下载requests库 第一步:找到python的安装位置,可以从下面的图中找到 第二步:复制scripts文件夹的位置 第三步:win+r打开cmd cd 到scripts文件夹的位置 第四步:运行 ...

  4. CF83A Magical Array 题解

    Content 有一个长度为 \(n\) 的序列 \(a_1,a_2,a_3,...,a_n\).定义一个"神奇数组"为在上面的序列中最大值和最小值相等的子序列.求出这个序列中&q ...

  5. libevent 源码分析

    1,前言 Libevent是一个轻量级的开源高性能网络库,使用者众多,研究者更甚,相关文章也不少.写这一系列文章的用意在于,一则分享心得:二则对libevent代码和设计思想做系统的.更深层次的分析, ...

  6. 在Winform项目和Web API的.NetCore项目中使用Serilog 来记录日志信息

    在我们常规的调试或者测试的时候,喜欢把一些测试信息打印在控制台或者记录在文件中,对于.netframework项目来说,我们输出控制台的日志信息习惯的用Console.WriteLine来输出查看,不 ...

  7. vue+uniapp实现美颜拍照录像,相册选择 | 录像限制时长,美颜拍照录像

    一.插件简介 Zhimi-BeautyCamera(智密 - 美颜相机图册插件)是一个支持美颜录像,美颜拍照,选择图视频功能,带录像参数时长限制的uniapp原生插件.平台支持:Android.IOS ...

  8. npm ERR! Error: EPERM: operation not permitted

    转载于:https://blog.csdn.net/qq_36772866/article/details/86934950 win10 在npm install时报错 解决方案 删除node-mou ...

  9. JAVA获取某年(当年)的第一天的开始时刻和某年(当年)的最后一天的最后时刻

    package com.date; import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Dat ...

  10. JS获取客户的IP地址

    这里使用的是第三方的获取方式,重要项目建议不要用,因为你不知道搜狐未来会不会倒闭,,, 搜狐IP地址查询接口(默认GBK):http://pv.sohu.com/cityjson 搜狐IP地址查询接口 ...