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. ...
随机推荐
- Linux学习 - shell脚本执行
一.shell概述 shell是一个命令行解释器,为用户提供一个向Linux内核发送请求以便运行程序的界面系统级程序,用户可以用shell来启动.挂起.停止甚至是编写一些程序 shell还是一个功能强 ...
- 【编程思想】【设计模式】【行为模式Behavioral】观察者模式Observer
Python转载版 https://github.com/faif/python-patterns/blob/master/behavioral/observer.py #!/usr/bin/env ...
- linux 彻底卸载mysql
1. 停止 mysql 服务: systemctl stop mysqld.service 2. yum remove mysql (因为 之前是通过 yum -y install 方式安装的 ) ...
- jQuery - 按回车键触发跳转
键盘事件有三种: keyup:按键按下去,抬上来后,事件才生效 (推荐) keydown:按键按下去就生效 keypress:与 keydown 事件类似,当按钮被按下时,会发生该事件,与 keydo ...
- 【HarmonyOS】【xml】使用xml绘制视频播放控制栏
本文记录HarmonyOS使用xml绘制视频播放控制栏 效果图如下 代码如下 点击查看代码 <?xml version="1.0" encoding="utf-8& ...
- [BUUCTF]REVERSE——[2019红帽杯]easyRE
[2019红帽杯]easyRE 附件 步骤: ida载入,没有main函数,就先检索了程序里的字符串 发现了base64加密的特征字符串,双击you found me跟进,找到了调用它的函数,函数很长 ...
- 用 shell 脚本做自动化测试
前言 项目中有一个功能,需要监控本地文件系统的变更,例如文件的增.删.改名.文件数据变动等等.之前只在 windows 上有实现,采用的是 iocp + ReadDirectoryChanges 方案 ...
- AT2202 硬度フェスティバル / Kode Festival 题解
Content 有 \(2^n\) 块石头,第 \(i\) 块石头硬度为 \(a_i\).重复执行以下操作直到只剩下一块石头为止: 让当前编号为 \((1,2)\).\((3,4)\).-- 的石头互 ...
- Linq中常用语法
using System;using System.Collections.Generic;using System.ComponentModel.Design;using System.Linq;u ...
- rinted端口转发
https://www.cnblogs.com/linuxk/p/10075803.html 阿里云Redis外网转发访问 1.前提条件 如果您需要从本地 PC 端访问 Redis 实例进行数据操 ...