Vue3学习- setup 使用 useRoute函数返回为 undefined,语法糖与非语法糖的错误、正确的写法情况

代码情况

import { ref,computed,watch,reactive } from 'vue'
import { RouterView,RouterLink,useRoute,useRouter } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
function toggleRoute(){const temprou = useRoute()console.log(temprou);
}

正确

import { ref,computed,watch,reactive } from 'vue'
import { RouterView,RouterLink,useRoute,useRouter } from 'vue-router'
const temprou = useRoute()
import HelloWorld from './components/HelloWorld.vue'
function toggleRoute(){console.log(temprou);
}

总结

  • 我使用了vue3的setup语法糖。
  • 如果是非vue3 setup语法糖,useRouter和useRoute函数不能在setup里面的函数体内部执行,要放在顶部或者其他位置,不然作用域改变,执行后的router/route是 undefined。

非 setup 语法糖 错误写法

import { useRoute } from 'vue-router'
const useRoute1 = useRoute()export default {setup() {console.log(useRoute1);}}

非 setup 语法糖 正确

import { useRoute } from 'vue-router'
export default {setup() {const route = useRoute()console.log(route.params)}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/844845.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

国内前十款专业外盘期货交易app软件排名盘点(综合版)

随着社会经济的不断发展,现在投资者倾向于投资各种项目以获取超额收益。在选择外盘期货交易app软件时,有几个关键的因素需要考虑。首先是软件的可靠度和安全度,因为交易涉及到实际资金。因此,需要选择具备专业资质、经验丰富、充分…

mybatis问题汇总

Mapped Statements collection does not contain value for mapper.xml中namespace存在问题 使用 ${}实现关键字(表名、列名)的可变 #{} 和 ${} 的区别

Android下HWC以及drm_hwcomposer普法(上)

Android下HWC以及drm_hwcomposer普法(上) 引言 按摩得全套,错了,做事情得全套,普法分析也是如此。drm_hwcomposer如果对Android图形栈有一定研究的童鞋们应该知道它是Android提供的一个的图形后端合成处理HAL模块的实现。但是在分析这个之前…

汽车悬架分为哪几类

汽车悬架分为哪几类 1)汽车的悬架系统可根据结构分为两种:独立悬架和非独立悬架,独立悬架根据构造又可以分为CDC运动悬架(CDC电磁悬架系统)和空气悬架; 2)当前比较火热的空气悬架,是独立悬架的一种; 3)前轮主要使用麦弗逊式独立悬架 和 双叉臂悬架,后轮主要使用多…

实景三维简介

实景三维简介 一、实景三维定义 实景三维(3D real scene),是一个专业术语,对一定范围内人类生产、生活和生态空间进行真实、立体、时序化反映和表达的数字空间。 对一定范围内人类生产、生活和生态空间进行真实、立体、时序化反…

倒角距离【Chamfer Distance】

倒角距离(chamfer distance)是用于评估两组点之间的相似度的度量。给定两个点集 A 和 B,倒角距离定义为 A 中每个点到 B 中最近邻点的距离之和,加上 B 中每个点到 A 中最近邻点的距离之和。它用于各种应用,包括计算机视…

nginx 反向代理配置详解

Nginx 反向代理是一种常用的部署策略,用于将客户端请求转发到内部网络中的一个或多个服务器,这些服务器直接处理请求并返回响应给Nginx,再由Nginx转交给客户端。这种设置可以提高网站的可用性和安全性,同时也能实现负载均衡、缓存…

数据分析——分群思维、RFM实现用户分群

分群思维 按照某个指标(可以是用户生命周期、活跃度、付费)来划分用户 分群好处: 1.是用户精细化运营的基础,也就是说只有分群了才可以针对每一个群进行运营策略 2.体现用户的差异性,比较不同层级的差异更能发现问题 …

每期一个小窍门 k8s版本的 Prometheus + grafana + alertmanager 三件套部署监控落地

首先部署prometheus 首先是pvc apiVersion: v1 kind: PersistentVolumeClaim metadata:name: prometheus-data-pvcnamespace: monitor spec:accessModes:- ReadWriteManystorageClassName: "data-nfs-storage"resources:requests:storage: 10Gi然后接着 cluster-ro…

CSS+Canvas绘制最美星空(一闪一闪亮晶晶效果+流星划过)

1.效果 2.代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><style>body,html {margin: 0;padding: 0;ov…

商业应用中的AI模型选择:开源还是闭源?

评价一个AI模型“好不好”、“有没有发展”&#xff0c;往往绕不开“开源”和“闭源”这两条不同的发展路径。这两种路径各有优劣&#xff0c;从数据隐私、商业应用和社区参与三个方面来看&#xff0c;我们可以更全面地理解它们的差异和影响。 方向一&#xff1a;数据隐私 开…

【Vue】v-on事件绑定指令

作用&#xff1a; 注册事件 添加监听 提供处理逻辑 使用Vue时&#xff0c;如需为DOM注册事件&#xff0c;及其的简单&#xff0c;语法如下&#xff1a; // 内联语句&#xff1a;就是一段可执行代码 // 内联语句是在模板中写代码&#xff0c;所以它是可以直接访问到里面的数…

Android12 将成果物生成到system和vendor分区

最近工作中遇到这么个事情&#xff0c;之前项目中留存的动态库是生成在vendor分区中&#xff0c;现在需要在system_ext分区中也生成&#xff0c;以便Android的系统进程也能访问这个动态库。 因此&#xff0c;需要修改对应动态库项目的Android.bp cc_library_shared { name: &qu…

20 VUE学习:插件

介绍 插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。下面是如何安装一个插件的示例&#xff1a; import { createApp } from vueconst app createApp({})app.use(myPlugin, {/* 可选的选项 */ })一个插件可以是一个拥有 install() 方法的对象&#xff0c;也可以直接…

CNAS软件测试公司作用分享,如何获取CNAS软件测试报告?

在软件测试行业&#xff0c;CNAS认可和CNAS软件测试公司是不可忽视的关键词。CNAS认可是指中国合格评定国家认可委员会对特定领域组织、机构或公司的能力和资质进行的认可过程。该认可遵循国际标准及相关法律法规&#xff0c;是评定组织或实验室技术能力和专业水平的权威认可&a…

ctfshow web入门 嵌入式 bash cpp pwn

kali转bash shell方法 方便我们本地 bash脚本教程 下面这个代码是bash脚本 #!/bin/bashOIFS"$IFS"IFS"," //表示逗号为字段分隔符set $QUERY_STRING //将参数传入数组Args($QUERY_STRING)IFS"$OIFS" //恢复原始IFS值if [ "$…

2024年5月28号PMP每日三题含答案

2024年5月28号PMP每日三题含答案 1.项目经理与项目干系人开会&#xff0c;获得关于如何最好地向施工现场输送用品的信息和知识。这使用的是哪种沟通方法类型&#xff1f; A.交互式沟通 B.内部沟通 C.拉式沟通 D.推式沟通 1.解析&#xff1a;A是参考答案。开会是交互式沟通。知…

【考研数学】李艳芳900比李林880难吗?值得做吗?

差不多&#xff0c;只能说基础没搞好刷这两个都很费劲 李艳芳900题把每个章节题目划分为ABC三个难度级别&#xff0c;题目选取的难度较大也比较新颖&#xff0c;计算量也非常接近考研趋势&#xff0c;原创性很高&#xff0c;比较适合过完一轮的同学继续做补充和强化 880算是比…

Java 数组的基本使用【Array】

目录 含义语法格式语句特点数组的长度数组的元素打印数组显示数组数组的复制扩展示例【12】 含义 数组&#xff08;array&#xff09;是一种最简单的复合数据类型&#xff0c;它是有序数据的集合&#xff0c;数组中的每个元素具有相同的数据类型&#xff0c;可以用一个统一的数…

cesium绘制编辑区域

npm 安装也是可以的 #默认安装最新的 yarn add cesium#卸载插件 yarn remove cesium#安装指定版本的 yarn add cesium1.96.0#安装指定版本到测试环境 yarn add cesium1.96.0 -D yarn install turf/turf token记得换成您自己的&#xff01;&#xff01;&#xff01; <t…