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. ...
随机推荐
- Spring的事务传播机制(通俗易懂)
概述 Spring的事务传播机制有7种,在枚举Propagation中有定义. 1.REQUIRED PROPAGATION_REQUIRED:如果当前没有事务,就创建一个新事务,如果当前存在事务,就 ...
- Java Jar包压缩、解压使用
什么是jar包JAR(Java Archive)是Java的归档文件,它是一种与平台无关的文件格式,它允许将许多文件组合成一个压缩文件. 如何打/解包使用jdk/bin/jar.exe工具,配置完环境 ...
- Spring(3):AOP面向切面编程
一,AOP介绍 AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延续,是软件开 ...
- SpringBoot 项目不加载 application.properties 配置文件
起因:新安装的idea第一次运行springboot项目报url错误(Failed to configure a DataSource: 'url' attribute is not specifie ...
- 使用buffered流结合byte数组,读入文件中的内容,包括中文字符
package com.itcast.demo05.Buffered;import java.io.BufferedInputStream;import java.io.FileInputStream ...
- angular关于select的留白问题
Angular select留白的问题 小白的总结,大神勿喷:需要转载请说明出处,如果有什么问题,欢迎留言 总结:出现留白说明你的ng-model的值在option的value中没有对应的值: 一.直 ...
- 云服务器ECS部署和卸载RabbitMQ
云服务器ECS部署RabbitMQ RabbitMQ是实现了高级消息队列协议(AMQP)的开源消息代理软件,用于在分布式系统中存储转发消息,有良好的易用性.扩展性和高可用性.本文介绍如何通过ECS实例 ...
- Python语法入门之与用户交互、运算符
一.与用户交互 输入 获取用户输入 username = input('请输入您的用户名>>>:') '''将input获取到的用户输入绑定给变量名username''' print ...
- [BUUCTF]REVERSE——[V&N2020 公开赛]CSRe
[V&N2020 公开赛]CSRe 附件 步骤: 例行检查,无壳儿,但是有NET混淆,使用de4dot工具进行处理 之后用dnSpy打开,从入口点开始看程序 找到有关flag的信息 flag由 ...
- LuoguP7337 『MdOI R4』Fun 题解
Content 有 \(n\) 个人去打比赛.给出第 \(i\) 个人的交通方式 \(t_i\) 和颓废值 \(q_i\)(均以 \(0/1\) 表示).如果 \(t_i=1,q_i=1\) 的人数 ...