Vue路由的传参

Vue传参方式可以划分为params传参(参数隐藏在路径中)和query传参(参数在?后)俩种方式

1. 使用 router-link  标签跳转路由

要注意 to  和 :to 的不同:  to 不带参数 , :to 带参数

(1)使用params 传参

vue页面

<router-link :to="{name:'Test7',params:{tid:1,title:'hello test7'}}">测试7-路由</router-link> 

要修改路由文件( router目录下的 js  ) ,注意 :

{
   path: '/ts7/:tid/:title',
   name: 'Test7',
   component: () => import('../views/test7.vue')
 }

注意:在路由的配置文件里给该路由后面拼接需要的参数(:参数)这步不要省略。否则params传参刷新页面的时候会丢失数据。

js中接收参数,注意:this.$route

init(){
                // 接收 name params 的 参数
                // 注意是 this.$route
                this.tid = this.$route.params.tid;
                this.title = this.$route.params.title;
            }

(2)使用query 传参数

vue 页面

<router-link :to="{path:'/ts8',query:{tid:2,title:'welcome to test8'}}">测试8-路由</router-link> 

不要改路由文件
js中接收参数

init(){
                // path query 组合
                this.tid = this.$route.query.tid;
                this.title = this.$route.query.title;
            }

2. 函数式路由传,不用router-link标签

关键语法: this.$router.push

vue 页面上写

<div>
            <button @click="jump8">去测试8页面</button>
        </div>

js 函数,query 传参的方式

jump8(){
                //this.$router.push("/ts6"); // 不带参数
                this.$router.push({ 
                    path:'/ts8',
                    query:{
                        tid:4,
                        title:'7页面过来访问'
                    }
                });
                // 带参数
            }

点击按钮后就可以调到对应的vue路由页面。

params传参的方式,要修改对应的路由js

jump7(){
                //编程式路由 : this.$router.push
                this.$router.push({
                    name:'Test7',
                    params:{
                        tid:3,
                        title:'8页面过来访问'
                    }
                })
                //
            }

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

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

相关文章

【机器学习笔记】4 朴素贝叶斯

贝叶斯方法 贝叶斯分类 贝叶斯分类是一类分类算法的总称&#xff0c;这类算法均以贝叶斯定理为基础&#xff0c;故统称为贝叶斯分类。 朴素贝叶斯分类是这一类算法中最简单的较为常见的算法。 先验概率 根据以往经验和分析得到的概率。我们用&#x1d443;(&#x1d44c;)来代…

FL Studio 21.2.3.4004 All Plugins Edition Win/Mac音乐软件

FL Studio 21.2.3.4004 All Plugins Edition 是一款功能强大的音乐制作软件&#xff0c;提供了丰富的音频处理工具和插件&#xff0c;适用于专业音乐制作人和爱好者。该软件具有直观的用户界面&#xff0c;支持多轨道录音、混音和编辑&#xff0c;以及各种音频效果和虚拟乐器。…

【pandas 不同文件读取和存储】

文章目录 一、Pandas 文件读取和存储概览二、读取不同类型的文件1. CSV文件的读取与存储代码及解释&#xff1a; 2. Excel文件的读取与存储代码及解释&#xff1a; 3. JSON文件的读取与存储代码及解释&#xff1a; 4. SQL数据库的读取与存储代码及解释&#xff1a; 5. 其他格式…

华清远见嵌入式学习——春节作业——2.15日

作业要求&#xff1a; 编写led驱动&#xff0c;通过应用程序控制三盏灯亮灭 作业答案&#xff1a; 作业效果&#xff1a; mychrdev.c #include <linux/init.h> #include <linux/module.h> #include <linux/fs.h> #include <linux/uaccess.h> #incl…

springboot声明(创建)RabbitMQ交换机和队列

在之前我们都是基于RabbitMQ控制台来创建队列、交换机。但是在实际开发时&#xff0c;队列和交换机是程序员定义的&#xff0c;将来项目上线&#xff0c;又要交给运维去创建。那么程序员就需要把程序中运行的所有队列和交换机都写下来&#xff0c;交给运维。在这个过程中是很容…

基于GPT-4一键完成数据分析全流程的AI Agent: Streamline Analyst

大型语言模型&#xff08;LLM&#xff09;的兴起不仅为获取知识和解决问题开辟了新的可能性&#xff0c;而且催生了一些新型智能系统&#xff0c;例如旨在辅助用户完成特定任务的AI Copilot以及旨在自动化和自主执行复杂任务的AI Agent&#xff0c;使得编程、创作等任务变得高效…

医卫答案在哪搜?九个公众号和软件推荐清单! #笔记#笔记#微信

在这个信息爆炸的时代&#xff0c;合理利用学习工具可以帮助我们过滤和获取有用的知识。 1.粉鹿搜题 这是一个公众号 题库包括四六级答案、各学校往期课后答案、期末考试题等&#xff0c;使用比较简单。 下方附上一些测试的试题及答案 1、最有可能担任债券发行受托人的个人…

ES实战--文档间的关系

文档常见关系 1.对象类型 2.嵌套文档 3.文档间的父子关系 4.反规范化 5.应用端的链接 嵌套映射和对象映射看上去差不多,不过其type不是object而是nested 查询和过滤器区别 1.查询是计算得分的,查询返回按照相关性得分排列的结果 2,过滤器不计算得分,运行更快,且易缓存 Nested查…

SSM框架,Spring-ioc的学习(下)

拓展&#xff1a;在xml文件中读取外部配置文件 例&#xff1a;若要导入外部配置文件jdbc.properties <?xml version"1.0" encoding"UTF-8"?> <beans xmlns"<http://www.springframework.org/schema/beans>"xmlns:xsi"&l…

装饰工程|装饰工程管理系统-项目立项子系统的设计与实现|基于Springboot的装饰工程管理系统设计与实现(源码+数据库+文档)

装饰工程管理系统-项目立项子系统目录 目录 基于Springboot的装饰工程管理系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、管理员功能实现 &#xff08;2&#xff09;合同报价管理 &#xff08;3&#xff09;装饰材料总计划管理 &#xff08;4&#xff0…

Java与JavaScript的区别与联系

Java是目前编程领域使用非常广泛的编程语言&#xff0c;相较于JavaScript&#xff0c;Java更被人们熟知。很多Java程序员想学门脚本语言&#xff0c;一看JavaScript和Java这么像&#xff0c;很有亲切感&#xff0c;那干脆就学它了&#xff0c;这也间接的帮助了JavaScript的发展…

OLED显示红外遥控键码

基本原理 本遥控器的编码是NEC编码&#xff0c;为PWM&#xff08;脉冲宽度调制&#xff09;。 发射红外载波的时间固定&#xff0c;通过改变不发射载波的时间来改变占空比。 逻辑“0”是由0.56ms的38KHZ载波和0.560ms的无载波间隔组成&#xff1b;逻辑“1”是由0.56ms的38KHZ…

LabVIEW高效电磁阀性能测试

LabVIEW高效电磁阀性能测试 在核电站的安全运营中&#xff0c;电磁阀作为关键组件&#xff0c;其性能的可靠性至关重要。设计一套基于LabVIEW的电磁阀测试平台&#xff0c;既能精准测试电磁阀的多项性能指标&#xff0c;又能提高检修效率与准确性&#xff0c;进而保障核电站的…

接口测试全流程扫盲

扫盲内容&#xff1a; 1.什么是接口&#xff1f; 2.接口都有哪些类型&#xff1f; 3.接口的本质是什么&#xff1f; 4.什么是接口测试&#xff1f; 5.问什么要做接口测试&#xff1f; 6.怎样做接口测试&#xff1f; 7.接口测测试点是什么&#xff1f; 8.接口测试都要掌…

​StableSwarmUI#超越文本的prompt

今天看到一个新的webui方案&#xff0c;是Stability-AI开源的&#xff1a; StableSwarmUI 是一个模块化的稳定扩散web用户界面&#xff0c;着重于使强大的工具易于访问、高性能和可扩展性。 由于项目还在开发中&#xff0c;我们可以先了解下&#xff0c;翻看了它的特点&#xf…

ELAdmin 发送邮件

邮箱配置 ELAdmin目录中选择系统工具->邮件工具。 发件人邮箱&#xff1a;发送者的邮箱地址发件用户名&#xff1a;一般都是发件人邮箱前面的部分&#xff0c;也可以任意写邮箱密码&#xff1a;如果是 qq 邮箱或者腾讯企业邮箱&#xff0c;需要使用授权码。SMTP地址&…

03 SS之返回JSON+

1. 返回JSON 为什么要返回JSON 前后端分离成为企业应用开发中的主流&#xff0c;前后端分离通过json进行交互&#xff0c;登录成功和失败后不用页面跳转&#xff0c;而是给前端返回一段JSON提示, 前端根据JSON提示构建页面. 需求: 对于登录的各种状态 , 给前端返回JSON数据 …

表的连接

目录 内连接实现效果 使用左外连接&#xff0c;将所有的员工信息都显示出来&#xff0c;即便他没有对应的部门 使用右外连接&#xff0c;将所有的部门信息都显示出来 查询每个员工的编号、姓名、职位&#xff0c;以及所在各部门的领导姓名、领导职位 确定所需要的数据表 确…

螺旋矩阵 III(c++题解)

题目描述 在 rows x cols 的网格上&#xff0c;你从单元格 (rStart, cStart) 面朝东面开始。网格的西北角位于第一行第一列&#xff0c;网格的东南角位于最后一行最后一列。 你需要以顺时针按螺旋状行走&#xff0c;访问此网格中的每个位置。每当移动到网格的边界之外时&…

多模态基础--- word Embedding

1 word Embedding 原始的单词编码方式&#xff1a; one-hot&#xff0c;维度太大&#xff0c;不同单词之间相互独立&#xff0c;没有远近关系区分。 wordclass&#xff0c;将同一类单词编码在一起&#xff0c;此时丢失了类别和类别间的相关信息&#xff0c;比如class1和class3…