Vue 路由传递参数 query、params

news2024/11/14 20:41:31

1、to的对象写法,绑定参数 

<template>
2  <ul>
3    <li v-for="m in messlist" :key="m.id">
4      <router-link :to="{ 
        //使用params时,这个路径必须用name及别名......name: 'xiangqing', 
        path: '/bbb/message/detail', 
        query: { id: m.id }}"> {{ m.title }}</router-link>
5    </li>
6  </ul>
7</template>

2、字符串路径写法

<template>
2  <ul>
3    <li v-for="m in messlist" :key="m.id">
4      <router-link :to="'/bbb/message/detail?id=' + m.id"> {{ m.title }}</router-link>
5    </li>
6  </ul>
7</template>

 3、接受页面接受参数

<template>
    <div>
        <!---------直接接受参数-------->
        id是:{{ $route.query.id }}
        id是:{{ $route.query.title }}
        ===================================
        <br>
        <!-----------监听参数--------->
        id是:{{ title }}
        id是:{{ id }}
    </div>
</template>
<script>
export default {
    name: 'Detail',
    data() {
        return {
            'id': '',
            'title':''
        }
    },
    mounted() {
        console.log(this.$route)
    },
    watch: {
        '$route.query': {
            handler(newQuery) {
                // 根据需要更新组件的状态
                console.log(newQuery.id)
                this.id = newQuery.id
                this.title = newQuery.title
                //也可以通过axios获取数据渲染
            },
            immediate: true, // 立即执行一次,确保在首次渲染时也能触发
            deep: true // 监听对象内部属性的变化
        }
      
    },
}
</script>

===========================params=====================================

<template>
    <div>
        <!---------直接接受参数-------->
        id是:{{ $route.query.id }}
        id是:{{ $route.query.title }}
        ===================================
        <br>
        <!-----------监听参数--------->
        id是:{{ title }}
        id是:{{ id }}
        ===================================
        <!---------直接接受参数-------->
        <br>
        params接受id是:{{ $route.params.id }}
        params接受id是:{{ $route.params.title }}
        ===================================
        <br>
    </div>
</template>
<script>
export default {
    name: 'Detail',
    data() {
        return {
            'id': '',
            'title':''
        }
    },
    mounted() {
        console.log(this.$route)
    },
    watch: {
        // '$route.query': {
        //     handler(newQuery) {
        //         // 根据需要更新组件的状态
        //         console.log(newQuery.id)
        //         this.id = newQuery.id
        //         this.title = newQuery.title
        //     },
        //     immediate: true, // 立即执行一次,确保在首次渲染时也能触发
        //     deep: true // 监听对象内部属性的变化
        // }
        '$route.params': {
            handler(newQuery) {
                // 根据需要更新组件的状态
                console.log(newQuery.id)
                this.id = newQuery.id
                this.title = newQuery.title
            },
            immediate: true, // 立即执行一次,确保在首次渲染时也能触发
            deep: true // 监听对象内部属性的变化
        }
      
    },
}
</script>

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

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

相关文章

自动驾驶#芯片-1

概述 汽车是芯片应用场景之一&#xff0c;汽车芯片需要具备车规级。  车规级芯片对加工工艺要求不高&#xff0c;但对质量要求高。需要经过的认证过程&#xff0c;包括质量管理标准ISO/TS 16949、可靠性标准 AEC-Q100、功能安全标准ISO26262等。  汽车内不同用途的芯片要求…

批量替换删除图片文件名称中相同数字:轻松管理文件结构新技巧大揭秘

特别是当图片文件名称中包含相同的数字时&#xff0c;想要快速找到或整理这些文件更是难上加难。今天&#xff0c;我要向大家揭秘一种轻松管理图片文件结构的新软件——文件批量改名高手。 进入“文件批量改命名高手”主页面&#xff0c;你会看到一个简洁明了的操作界面。在板…

聚焦新版综合编程能力面试考查汇总

目录 一、业务性编程和广度能力考查 &#xff08;一&#xff09;基本定义 &#xff08;二&#xff09;必要性分析 二、高频考查样题&#xff08;编程扩展问法&#xff09; 考题1: 用java 代码实现一个死锁用例&#xff0c;说说怎么解决死锁问题&#xff1f;&#xff08;高…

Python 组内序号

模仿SQL的row_number() over (partition by column order by column) import pandas as pd # 创建一个示例数据框 data { group: [A, A, A, B, B, C, C, C, C], value: [3, 1, 2, 5, 4, 6, 9, 7, 8] } df pd.DataFrame(data) # 先按group分组&#xff0c;再按val…

eclipse导入Tomcat9源码

环境准备 下载Tomcat源码 https://github.com/apache/tomcat/tagsJDK版本 Tomcat9要求JDK17以上版本 https://www.oracle.com/java/technologies/javase/jdk17-archive-downloads.htmlAnt安装 https://ant.apache.org/bindownload.cgi我这里装的是apache-ant-1.10.14版本 …

Ubuntu系统调试分析工具

文章目录 一、火焰图一、下载 FlameGraph二、安装 iperf三、使用二、Lockdep1、内核开启 Lockdep 配置2、判断 Lockdep 开启是否成功一、火焰图 一、下载 FlameGraph git clone https://github.com/brendangregg/FlameGraph.gitFlameGraph 介绍:   基本思想是将程序的函数…

便民智慧小程序源码系统 同城信息+商家联盟+生活电商 功能强大 带完整的安装代码包以及搭建部署教程

系统概述 便民智慧小程序源码系统是一个高度集成化的本地化服务平台解决方案&#xff0c;它融合了同城信息发布、商家联盟管理和生活电商平台三大核心模块&#xff0c;旨在打造一个全方位、多维度的生活服务生态系统。该系统采用先进的前后端分离架构&#xff0c;支持快速响应…

Redux 与 MVI:Android 应用的对比

Redux 与 MVI&#xff1a;Android 应用的对比 在为 Android 应用选择合适的状态管理架构时可能会感到困惑。在这个领域中&#xff0c;有两种流行的选择是 Redux 和 MVI&#xff08;Model-View-Intent&#xff09;。两者都有各自的优缺点&#xff0c;因此在深入研究之前了解它们…

阿里云物联网平台案例教程

1、定义&#xff1a; ​ 物联网&#xff08;简称IOT&#xff09;把任何物体与物联网相连接&#xff0c;进行消息的交换和通信&#xff0c;实现对物品的智能化识别。简单说是&#xff1a;物联网就是把所有的物体连接起来相互作用&#xff0c;形成一个互联互通的网络&#xff0c…

iFlyCode:AI智能编程助手引领未来软件开发新趋势

体验地址 在当前软件行业飞速发展的背景下&#xff0c;开发效率和代码质量成为了衡量软件工程师工作效能的两大关键指标。为了应对日益增长的市场需求和紧迫的发布时间&#xff0c;科大讯飞推出了iFlyCode2.0——一款集AI技术于一身的智能编程助手&#xff0c;旨在引领未来软件…

如何将JPG/PNG位图免费快速一键转换成SVG格式的矢量图

环境&#xff1a; JPG/PNG位图 问题描述&#xff1a; 如何将JPG/PNG位图快速一键转换成SVG格式的矢量图 解决方案&#xff1a; 是一个人工智能驱动的图片转换工具&#xff0c;可以帮助用户将」JPG/PNG位图快速转换成SVG格式的矢量图&#xff0c;方便设计人员对图片进行二次…

Java面试八股之super()和this()的区别

super()和this()的区别 super() 目的&#xff1a;super()用于从子类的构造方法中调用父类&#xff08;超类&#xff09;的构造方法。这是为了确保父类的初始化操作得以执行&#xff0c;因为子类继承了父类的属性和方法&#xff0c;可能需要先设置好父类的状态。 位置&#x…

桌面记事软件除了记事本还有什么

在忙碌的工作日&#xff0c;我的桌面总是堆满了各种文件、资料&#xff0c;还有贴满便签的记事本。每次需要查找某个信息或者确认接下来的计划时&#xff0c;我都要在杂乱的桌面上翻找好一会儿&#xff0c;这让我感到非常烦恼。 有一天&#xff0c;我急着找一个之前记录的重要…

WPF/C#:程序关闭的三种模式

ShutdownMode枚举类型介绍 ShutdownMode是一个枚举类型&#xff0c;它定义了WPF应用程序的关闭方式。这个枚举类型有三个成员&#xff1a; OnLastWindowClose&#xff1a;当最后一个窗口关闭或者调用System.Windows.Application.Shutdown方法时&#xff0c;应用程序会关闭。O…

HarmonyOS(33) @LocalStorageProp使用指南

LocalStorageProp使用指南 说明使用示例参考资料 说明 不同于LocalStorageLink与LocalStorage建立的双向同步关系&#xff0c;LocalStorageProp装饰的变量与LocalStorage中给定属性建立单向同步关系。LocalStorageProp(key)是和LocalStorage中key对应的属性建立单向数据同步&a…

SD3303A 大功率高亮度LED驱动芯片IC

一般描述 SD3303A是一款大功率高亮度LED驱动芯片,可以提供1A的电流驱动3W的LED。具有高效率&#xff0c;低功耗等特点&#xff0c;适用于电池供电的LED照明设备。 SD3303A具有开路保护和过温保护。 SD3303A需要使用两颗10uF(或者更大)的瓷片电容&#xff0c;来保…

如何理解质量

早年写过一篇未发表的论文《质量的相对性》&#xff0c;就是为了寻求到底什么才是质量这个问题的答案。现在&#xff0c;在准备了诸多超越以往的认知的概念之后&#xff0c;关于质量是什么的想法&#xff0c;也逐渐有了眉目。 质量有两种&#xff0c;一种叫做惯性质量&#xff…

Docker大学生看了都会系列(九、Docker使用Buildx构建不同CPU架构镜像)

系列文章目录 第一章 Docker介绍 第二章 2.1 Mac通过Homebrew安装Docker 第二章 2.2 CentOS安装Docker 第三章 Docker常用命令 第四章 常用命令实战 第五章 Docker镜像详解 第六章 Docker容器数据卷 第七章 Dockerfile详解 第八章 Dokcerfile部署go项目 第九章 Docker使用Build…

【云岚到家】-day02-4-我的账户-实名认证

【云岚到家】-day02-4-我的账户-实名认证 1 我的账户设置-实战1.1 配置OSS1.2 需求分析1.2.1 服务端设置银行账户1.2.2 机构端设置银行账户1.2.3 表结构设计1.2.4 表结构相关的controller、service、mapper、entity 1.3 服务端设置银行账户接口设计1.3.1 新增或更新银行账号信息…

【WWDC 2024 发表会懒人包】iOS 18、iPadOS 18、macOS 15、Apple Intelligence 重点一次看

苹果今天&#xff08;6/11&#xff09;发布了全新iOS 18、iPadOS 18、macOS 15、watchOS 11以及visionOS 2&#xff0c;这次的WWDC大会首场发表会久违的快要2 个小时&#xff0c;下面就带大家来看看最新的iOS 18、iPadOS 18、macOS 15、watchOS 11、visionOS 2 特色功能懒人包。…