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基础命令---apachectl
apachectl apachectl指令是apache http服务器的前端控制程序,可以协助控制apache服务的守护进程httpd. 此命令的适用范围:RedHat.RHEL.Ubuntu.Ce ...
- OpenStack之之一: 快速添加计算节点
根据需求创建脚本,可以快速添加节点#:初始化node节点 [root@node2 ~]# systemctl disable NetworkManager [root@node2 ~]# vim /e ...
- shell神器curl命令的用法 curl用法实例笔记
shell神器curl命令的用法举例,如下: ##基本用法(配合sed/awk/grep) $curl http://www.jquerycn.cn ##下载保存 $curl http://www.j ...
- Linux安装软件出错
1.Delta RPMs disabled because /usr/bin/applydeltarpm not installed. yum provides '*/applydeltarpm' # ...
- Spring Boot中使用Servlet与Filter
在Spring Boot中使用Servlet,根据Servlet注册方式的不同,有两种使用方式.若使用的是Servlet3.0+版本,则两种方式均可使用:若使用的是Servlet2.5版本,则只能使用 ...
- JS - 事件常用
问:什么是事件? 答:JS创建动态页面,可以被JS侦测到的行为.网页中的每个元素都可以产生某些可以触发JS函数的事件.比如说,当用户点击按钮时,就发生一个鼠标单击(onclick)事件,需要浏览器做出 ...
- 如何将java对象转换成json数据
package cn.hopetesting.com.test;import cn.hopetesting.com.domain.User;import com.fasterxml.jackson.c ...
- python安装imblearn(PackageNotFoundError: ''Package missing in current channels")
1.imblearn包在anaconda中是没有的,需要在命令行下自行安装,以下两个命令任选一个: 1. conda install -c glemaitre imbalanced-learn2. p ...
- C++内存管理:new / delete 和 cookie
new 和 delete C++的内存申请和释放是通过 new 和 delete 实现的, 而new 和 delete 其实就是通过 malloc 和 free 实现的. new 申请内存分为三个步骤 ...
- MySQL如何随机筛选25000条数据
一.SELECT * FROM sheet1 t1 ORDER BY RAND() LIMIT 10000; 二.SELECT * FROM sheet1 AS t1 JOIN (SELECT ROU ...