首页 > 其他分享 >vue中query和params的区别是什么

vue中query和params的区别是什么

时间:2023-07-22 23:33:46浏览次数:35  
标签:传参 vue params query 参数 地址栏 id

区别:

  1、query用path编写传参地址,而params用name编写传参地址;

  2、query刷新页面时参数不会消失,而params刷新页面时参数会消失;

  3、query传的参数会显示在url地址栏中,而params传参不会显示在地址栏中。

vue中query和params的区别是什么

query语法:

this.$router.push({path:“地址”,query:{id:“123”}}); //这是传递参数
this.$route.query.id; //这是接受参数

params语法:

this.$router.push({name:“地址”,params:{id:“123”}}); //这是传递参数
this.$route.params.id; //这是接受参数

区别:

1.首先就是写法得不同,query 得写法是 用 path 来编写传参地址,而 params 得写法是用 name 来编写传参地址,你可以看一下编写路由时候得相关属性,你也可以输出一下 路由对象信息 看一下

2.接收方法不同, 一个用 query 来接收, 一个用 params 接收 ,总结就是谁发得 谁去接收

3.query 在刷新页面得时候参数不会消失,而 params 刷新页面得时候会参数消失,可以考虑本地存储解决

4.query 传得参数都是显示在url 地址栏当中,而 params 传参不会显示在地址栏

标签:传参,vue,params,query,参数,地址栏,id
From: https://www.cnblogs.com/smile-fanyin/p/17574520.html

相关文章

  • jquery添加表格数据
    jQuery添加表格数据的实现流程1.创建一个HTML表格首先,我们需要在HTML页面中创建一个表格,可以使用以下代码:<tableid="myTable"><thead><tr><th>姓名</th><th>年龄</th><th>性别</th></tr></thead>......
  • jquery替换当前页面
    jQuery替换当前页面在Web开发中,有时候我们需要动态地替换当前页面的内容,而不需要重新加载整个页面。这可以通过使用jQuery来实现。jQuery是一个广泛应用于前端开发的JavaScript库,它简化了DOM操作、事件处理、动画效果等任务。为什么需要替换当前页面在Web应用中,有时候我们需要根......
  • jquery双击事件绑定
    jQuery双击事件绑定jQuery是一种广泛使用的JavaScript库,它使开发者能够更方便地操作HTML文档、处理事件以及动态改变网页内容。在jQuery中,事件绑定是一种非常常见的操作,它允许开发者指定某个事件发生时应该执行的操作。其中,双击事件是一种特殊的事件,它在用户快速点击某个元素两次......
  • jquery数组添加数据
    如何使用jQuery添加数据到数组中简介在使用jQuery开发过程中,经常会遇到需要向数组中添加数据的情况。本文将介绍如何使用jQuery实现数组的添加操作,帮助刚入行的小白快速掌握这一技巧。整体流程下面是实现"jquery数组添加数据"的整体流程,我们将使用一个表格展示每一步需要做的事......
  • jquery数组 splice
    jQuery数组splice方法详解在JavaScript编程中,数组是一种常用的数据结构,用于存储一系列的数据元素。在处理数组的时候,我们常常需要对数组进行增加、删除或修改等操作。jQuery库提供了一个非常方便的方法,即splice()方法,用于实现对数组的增删改操作。本文将详细介绍splice()方法的使......
  • 2023年最新50道Vue全套vue2+vue3面试题带答案汇总
    此文章不断更新,欢迎大家在评论区补充1.什么是MVVM?M-Model数据:它是与应用程序的业务逻辑相关的数据的封装载体V-View视图:它专注于界面的显示和渲染VM-ViewModel视图-数据:它是View和Model的粘合体,负责View和Model的交互和协作vue双向数据绑定是通过数据劫持结合......
  • vue-day37--修改默认配置
    1.vue脚手架文件结构 2.不同的版本vue3.修改默认配置  修改默认配置1.查看脚手架的默认配置vueinspect>output.js2.为什么main.js是入口文件,index.html是首页调整vue.config.js......
  • vue--day36--render函数
    1.脚手架里面为什么main.js里面,使用了render函数/***该文件是整个项目的入口文件*///引入VueimportVuefrom'vue'//引入App组件他是所有组件的父组件importAppfrom'./App.vue'//关闭vue的生产提示Vue.config.productionTip=false//创建Vue实例对象--vm......
  • Vue 中不同页面之间如何进行传值
    情景:比如页面1中获取到的值,页面2中需要用到,如何将页面1中的值传递给页面2呢?解决方法:可通过路由传参的方式   参考:https://blog.csdn.net/pleaseprintf/article/details/131345971......
  • vue-day33-vue 单文件组件
    1.indedx.html<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>练习一下单文件组件的语法</title></head><body><divid="root"></div><scripttype="t......