vue3获取当前路由
正解
使用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.currentRoute是RefImpl对象, 即我们使用ref返回的对象, 通过.value可以访问到当前的路由, 类似于vue的this.$route
使用console.log打印出来看看:

vue3获取当前路由的更多相关文章
- 获取vue路由跳转路径
平时BUG: 在vue中使用element ui 中的导航组件时,使用index作为跳转的路径,单击跳转没有问题,但是当刷新页面是,选项卡的激活 状态就变成初始化的了,起起初想到用获取window.l ...
- 路由传值及获取参数,路由跳转,路由检测,this.$route.query和this.$route.params接收参数,HttpGet请求拼接url参数
配置动态路由参数id: routes: [ // 动态路径参数 以冒号开头 { path: '/user/:id', component: User } ] html路由跳转: <router- ...
- react动态路由以及获取动态路由
业务中会遇到点击列表跳转到详情页, 1.在index.js修改我们的跟组件 新建router2的文件 import React from 'react' import { HashRouter as ...
- 在MVC的cshtml视图页获取默认路由下的ID值的方法
<a href="/user/resume/index/11"> <span class="title bold">我的 @Reques ...
- vue获取当前路由
完整url可以用 window.location.href路由路径可以用 this.$route.path路由路径参数 this.$route.params 例如:/user/:id → /user/ ...
- vue3跳转路由3步曲
import { useRouter } from 'vue-router'; // 1. 引入路由export default { setup() { const $router ...
- iOS获取当前路由信息
导入头文件: #import <SystemConfiguration/CaptiveNetwork.h> - (void)currentWifiSSID { // Does not ...
- vue3.x版本路由router跳转+传参
显示传参模式 get import { useRouter } from 'vue-router'; const router = useRouter(); let skipEdit = (key: ...
- vue3 监听路由($route)变化
setup() { // ... }, watch: { $route(m, n) { console.log('mm', m) console. ...
随机推荐
- 锁对象-条件对象-synchronized关键字
1 import java.util.concurrent.locks.Condition; 2 import java.util.concurrent.locks.Lock; 3 import ja ...
- spring生成EntityManagerFactory的三种方式
spring生成EntityManagerFactory的三种方式 1.LocalEntityManagerFactoryBean只是简单环境中使用.它使用JPA PersistenceProvide ...
- KVM配置
安装依赖包(因最小化安装) [root@slave-master ~]# yum install -y vim wget tree lrzsz gcc gcc-c++ automake pcre pc ...
- mysql数据库备份脚本一例
例子,mysql数据库备份脚本.vim mysql.sh #!/bin/bash DAY=`date +%Y-%m-%d` //日期以年月日显示并赋予DAY变量 SIZE=`du -sh /var/l ...
- 【Java】【设计模式】单例设计模式
思想: 为了避免其他程序过多建立该类对象,先禁止其他程序建立该类对象 为了让其他程序可以访问到该类对象,只好在本类中自定义一个对象 为了方便其他程序对自定义对象的访问,可以对外提供一些访问方式 代码体 ...
- mybatis分页插件PageHelper源码浅析
PageHelper 是Mybaties中的一个分页插件.其maven坐标 <!-- https://mvnrepository.com/artifact/com.github.pagehelp ...
- c3p0的使用步骤
//1.导入c3p0的连个包,和mysql的驱动包//2.配置c3p0.xml的配置文件 <c3p0-config> <!-- 使用默认的配置读取连接池对象 --> <d ...
- linux 让.net 控制台后台运行
命令 nohup 你的shell命令 & 例如 nohup dotnet MQTTClient.dll & 输入完成后,终端会有提示 这时再按下回车 回到shell命 ...
- KrakenD url匹配通配符 url_pattern wildcard
KrakenD是一个高性能Api网关, api转发的推荐做法是每个api一个配置项,也就是一个endpoint,其开发者认为api网关和纯粹的L7路由不一样(文章链接). 因此社区版并没有提供通配符 ...
- pwnable_start & ciscn_2019_es_2 & ez_pz_hackover_2016 & pwn2_sctf_2016
花了两天时间做了这四道题,感觉收获很多.但是这种收获感觉写文章写不出自己的思路,就录制了一个视频. pwnable_start 这道题考察了系统调用,shellcode的编写,和动态调试的知识. ci ...