router-link params传参

1、router.js配置

需要在路径后定义上要传的属性名 --》       /:属性名(query方式不需要)

{

  path: ‘/CreateProgress/:name1‘,

  name: ‘CreateProgress‘,

  component:CreateProgress

}

2、传参

与query不同的是  params是根据路由的name跳转的   而query是根据 path跳转的

<router-link :to="{name:‘CreateProgress‘,params:{name1:‘haha‘,name2:‘enen‘}}" target="_blank">xxxxx</router-link>

3、接受参数的方式和query相同

this.$route.params

this.$route.params.name1

query是

this.$route.query

this.$route.query.name1

当然 用params方式传参时,同时也可以用query方式传参

<router-link :to="{ name:‘CreateProgress‘,params: { name1: ‘参数‘},query: { queryId: status2 }}" >xxxxx</router-link>

接受方式 按照自己的接受方法接受 就行

也可以使用编程式跳转    是$router而不是$route    要跟接受参数的区分清楚

this.$router.push({ name:‘CreateProgress‘,params: { name1:‘参数‘},query: { queryId: status2 }});

可以用click事件来触发

原文地址:https://www.cnblogs.com/fqh123/p/9927569.html

时间: 2024-10-09 14:51:26

router-link params传参的相关文章

vue-router query和params传参(接收参数)的区别

版权声明: https://blog.csdn.net/youth_lx/article/details/79780938 <div class="markdown_views"> <!-- flowchart 箭头图标 勿删 --> <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><path stroke-linecap=&q

Vue用router.push(传参)跳转页面,参数改变,跳转页面数据不刷新的解决办法

vue-router同路由$router.push不跳转一个简单解决方案 vue-router跳转一般是这么写: goPage(ParentDeptCode2,DeptCode2,hosName,hosId){ this.$router.push({ path:'/ChoiceTime', query:{ DeptCode:ParentDeptCode2, DeptCode2:DeptCode2, hosName:hosName, hosId:hosId } })} 但是当遇到,需要跳转同页面不

vue路由params传参

路由跳转 {name:'',params:{id:''}} 子页面路由接受参数 this.$route.params.id 原文地址:https://www.cnblogs.com/renewload/p/11271242.html

在axios中使用params传参的时候传入数组的方法

如下: changeList为一个数组 此时请求的参数格式为下图 前端精品教程:百度网盘下载 解决方案为 将数组json序列化 此时参数格式为 前端精品教程:百度网盘下载 原文地址:https://www.cnblogs.com/hudayang2008/p/9813261.html

前端vue 跨组件传参,cokies,axion

路由跳转 ? 1 2 3 4 5 6 this.$router.push('/course'); this.$router.push({name: course}); this.$router.go(-1); this.$router.go(1); <router-link to="/course">课程页</router-link> <router-link :to="{name: 'course'}">课程页</rout

vue router 如何使用params query传参,以及有什么区别

写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家. 本文首发于我的个人blog:obkoro1.com Vue router如何传参 params.query是什么? params:/router1/:id ,/router1/123,/router1/789 ,这里的id叫做params query:/route

vue-router传参的坑(query和params)

1.query方式传参和接收参数 传参: this.$router.push({ path:'/xxx' query:{ id:id } }) 接收参数: this.$route.query.id 注意:传参是this.$router,接收参数是this.$route,这里千万要看清了!!! this.$router 和this.$route有何区别?在控制台打印两者可以很明显的看出两者的一些区别: 1.$router为VueRouter实例,想要导航到不同URL,则使用$router.push

vue-router路由传参之query和params

首先简单来说明一下$router和$route的区别 //$router : 是路由操作对象,只写对象 //$route : 路由信息对象,只读对象 //操作 路由跳转 this.$router.push({ name:'hello', params:{ name:'word', age:'11' } }) //读取 路由参数接收 this.name = this.$route.params.name; this.age = this.$route.params.age; 1·query传递参数

Vue 页面传参方式 Query 和 Params

1. query 与 params 传参 query ????需要和配合 path 属性使用,携带参数会拼接在请求路径后,效果同 Get 请求方式 http://localhost:8033/Permission/Role/Form?productCode=crm-operate&roleId=1&roleName=admin&roleType=-1&roleDesc=%E7%AE%A1%E7%90%86%E5%91%98 params ????需要配合 name 属性使用