vue 中的动态传参和query传参操作

2024-08-17 15:39:21

Vue router 如何传参

params、query 是什么？

params：/router1/:id，这里的 id 叫做 params。例如/router1/123, /router1/789

query：/router1?id=123，这里的 id 叫做 query。例如/router1?id=456

query 方式传参和接收参数

传参: this.$router.push({ path:'/xxx' query:{ id:id } }) this.$router.push 传参时, 并不会引起页面刷新。需要重新请求数据，代码如下。

<div>shopName:{{shop.shopName}}</div>
export default{
 data(){
  return {
   shop:{shopName:"shopName"},
   shopNo:"123"
  };
 },
 mounted(){
  // 初始时加载店铺数据
  this.loadShop();
 },
 watch:{
  // shopNo改变时重新加载
  shopNo:function(newShopNo){
   this.loadShop();
  }
 },
 methods:{
  loadShop(){
   // 调用API获取shop数据
   var shop = {/*获取到的数据*/};
   this.shop=shop;
  }
 }
}

接收参数: this.$route.query.id

params 方式传参和接收参数

params 传参路由界面： router.js: 路由设置这里，当你使用 params 方法传参的时候，要在路由后面加参数名，并且传参的时候，参数名要跟路由后面设置的参数名对应。使用 query 方法，就没有这种限制，直接在跳转里面用就可以

传参: this.$router.push({ name:'xxx' params:{ id:id } })

接收参数: this.$route.params.id

注意：如果路由上面不写参数，也是可以传过去的，但不会在 url 上面显示出你的参数，并且当你跳到别的页面或者刷新页面的时候参数会丢失（如下图所示），那依赖这个参数的 http 请求或者其他操作就会失败。

query 传参和 params 传参的区别

用法上的： query 要用 path 来引入，params 要用 name 来引入，接收参数都是类似的，分别是 this.$route.query.name 和 this.$route.params.name。注意接收参数的时候，已经是$route 而不是$router 了哦！！

展示上的： query 更加类似于我们 ajax 中 get 传参，params 则类似于 post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示所以两者不能同时使用！！！

router-link 和编程式导航两种跳转方式

通过 router-link 我们可以向路由到的组件传递参数，这在我们实际使用中时非常重要的。

编程式导航

router.push

router.replace 和 router.push()不同，使用 router.replace()会将一个访问记录 push 到 url 中，所以再退回了的时候一定会回到这里，而 router.replace()不是添加一个新的进入，而是替换栈顶元素，这样，在返回的时候，就会返回到栈顶元素的下面一个。

router.go

在浏览器记录中前进一步，等同于 history.forward() router.go(1)

后退一步记录，等同于 history.back() router.go(-1)

动态传参之坑

注意:params 传参，push 里面只能是 name:'xxxx',不能是 path:'/xxx',因为 params 只能用 name 来引入路由，如果这里写成了 path，接收参数页面会是 undefined！！！

补充知识：vue三种动态传参的方式

如下场景：

<el-table-column
  label="操作">
  <template slot-scope="scope">
   <el-button size="mini" type="primary" @click="goList(scope.row.id)">个人信息表</el-button>
  </template>
 </el-table-column>

.直接占位符的方式

goList(id){
 this.$router.push({path:`/line/${id}`})
}

需要对应路由配置如下：

  {
  path:'/line/:id',
  name:'line',
  component:line
  }

二、通过路由属性中的name来确定匹配的路由，通过params来传递参数

goList(id){
  this.$router.push({ name:"line",params:{ orderId:id }})
}

对应路由配置如下：

 {
  path:'/line',
  name:'line',
  component:line
}

三、通过 path来匹配路由，然后通过query来传递参数，传递的参数会暴露在地址栏中

goList(id){
 this.$router.push({ path: '/line',query: { orderId:id }})
}

对应路由配置同二

以上这篇vue 中的动态传参和query传参操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

解决vue-router中的query动态传参问题

最近在写项目,在写项目的过程会总发现这样或者那样的问题,比如说vue-router中的query如何传递动态的参数,经过了一些波折才解决了问题,问题描述如下: 希望跳转的时候url是这样的:http://localhost:8080/editmovie?id=**** <li><router-link :to="{path:'editmovie', query: {id : 111}}" class="edit">修改</router-
vue params、query传参使用详解

最近在学习Vue,本文介绍了vue params.query传参使用,分享给大家,也给自己留个笔记声明式:<router-link :to="..."> 编程式:router.push(...) 这两种方式都可以实现跳转链接,在上篇文章继续,通过A组件跳转链接到B组件并且传参数. 1.router.push使用 router/index.js export default new Router({ routes: [ { path: '/', name: 'A', co
vue router使用query和params传参的使用和区别

写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家. Vue router如何传参 params.query是什么? params:/router1/:id ,/router1/123,/router1/789 ,这里的id叫做params query:/router1?id=123 ,/router1?id=456
浅析vue-router jquery和params传参(接收参数)$router $route的区别

今天做项目时踩到了vue-router传参的坑(jquery和params),所以决定总结一下二者的区别. 1.jquery方式传参和接收参数传参: this.$router.push({ path:'/xxx' query:{ id:id } }) 接收参数: this.$route.query.id 注意:传参是this.$router,接收参数是this.$route,这里千万要看清了!!! this.$router 和this.$route有何区别? 在控制台打印两者可以很明显的看出两
vue 中的动态传参和query传参操作

Vue router 如何传参 params.query 是什么? params:/router1/:id,这里的 id 叫做 params.例如/router1/123, /router1/789 query:/router1?id=123,这里的 id 叫做 query.例如/router1?id=456 query 方式传参和接收参数传参: this.$router.push({ path:'/xxx' query:{ id:id } }) this.$router.push 传参时,
Vue中如何使用Map键值对传参详析

目录 Vue里使用Map键值对传参补充:vue遍历Map,Map在vue中的使用方法总结 Vue里使用Map键值对传参问题描述:在参数传递时时候Map键值对key:value的形式进行传参. 1.date数据区定义声明map变量和中间数据变量temp: data(){ return{ //其他代码 map:'', temp:[] } }, 2.methods方法区接口传值:声明map为Map变量,接收接口传过来的key数据生成表单项数据项: this.map=new Map() 即: //
vue中v-model动态生成的实例详解

vue中v-model动态生成的实例详解前言: 最近在做公司的项目中,有这么一个需求,每一行有一个input和一个select,其中行数是根据服务器返回的json数据动态变化的.那么问题来了,我们要怎样动态生成v-model? 现在项目做完了就整理了一下,直接贴代码了. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <
解决vue中无法动态修改jqgrid组件 url地址的问题

在项目开发中使用封装的jqgrid组件时需要动态修改URL地址,直接修改URL地址jqgrid请求的url地址并不会改变,这时我们可以强行修改jqgrid的url地址,修改如下: $("#accountGrid").setGridParam( //G,P要大写 { url:UrlService.url('www/1') } ) .trigger("reloadGrid"); 以上这篇解决vue中无法动态修改jqgrid组件 url地址的问题就是小编分享给大家的全部内
vue中实现动态生成二维码的方法

最近项目中有个裂变分享的需求,需要在页面中根据分享人的身份动态生成二维码图片放置在页面中,所以研究了一下这个功能的实现,同时把实现过程记录如下: 1.引入二维码生成模块 npm install qrcodejs2 --save 注意:此处安装qrcodejs2,安装依赖后可在main方法中进行全局引用设置,也可单独某个页面中进行引用设置. 2.引入使用 import QRCode from 'qrcodejs2'; 备注:在main中设置全局可使用 Vue.prototype.qrCode 3.
关于Vue中img动态拼接src图片地址的问题

下面看下Vue中img动态拼接:src图片地址,具体内容如下所示: 使用场景:根据后端返回图片标记来匹配本地图片资源例如:根据后端返回k1标记,前端生成assets/images/inventory/k1.png图片资源路径 <template> <div class="fl"> <img :src="getImgUrl(gatherInfo.img1)" alt=""> <img :src="
vue render函数动态加载img的src路径操作

分享一下我去如何解决vue render 中如何正确配置img的src 路径? 一.我的项目中有俩层组件, 第一层父组件,第二层是render函数封装的组件,父组件调用render函数组件二.render函数中需要创建<img>标签,img中的src是父组件传进来的: src正确传进来,图片却不不显示. 三.解决办法: 首先在父组件中将图片import进来, import empty from "./img/empty.png"; 在父组件的data中声明一个变量,将e
vue中element 的upload组件发送请求给后端操作

1.用到了before-upload属性, 用于在上传文件前的校验,并且发送请求给后端,传输格式进行文件流传输什么都不用设置,action属性随便设置,不能为空即可! 在before-upload属性的方法中的代码如下: var _this = this; debugger; // var files=file.target.files[0]; debugger; const isJPG = file.type === "image/jpeg"; const isLt2M = fil
Vue 中使用lodash对事件进行防抖和节流操作

有些浏览器事件可以在短时间内快速触发多次,比如调整窗口大小或向下滚动页面.例如,监听页面窗口滚动事件,并且用户持续快速地向下滚动页面,那么滚动事件可能在 3 秒内触发数千次,这可能会导致一些严重的性能问题. 如果在面试中讨论构建应用程序,出现滚动.窗口大小调整或按下键等事件请务必提及防抖(Debouncing) 和函数节流(Throttling)来提升页面速度和性能.这两兄弟的本质都是以闭包的形式存在.通过对事件对应的回调函数进行包裹.以自由变量的形式缓存时间信息,最后用 setTimeou
在vue中通过render函数给子组件设置ref操作

正常我们的写法是,这样ref不会生效,h是作用在渲染的时候的,而ref是渲染之后才创建的,因此在h函数中使用ref是无效的. render: (h, params) => { return h(expandRow, { ref:'child', props: { row: params.row } }) } 我们常见h函数的用法是: render: (h) => { return h(ele) } => 是es6的用法,相当于 (h) => {} 相当于 function(){},

vue 中的动态传参和query传参操作

相关推荐

随机推荐