this.$router.push 传参

index页面
1.params
this.$router.push()方法中path不能与params同用,否则param会失效,所以用name来指定页面,params来传递数据内容。

 1 <template>
 2 <img src="../../static/images/indexTermianal/teacher.png" alt="" @click ="go()" >
 3 </template>
 4 <script>
 5 methods:{
 6   go:function(){
 7     this.$router.push({
 8       name:‘indext‘,
 9       params:{
10         userId:1
11       }
12     })
13   }
14 }
15 </script>

在目标页面通过this.$route.params获取参数:
<p>{{this.$route.params.userId}}</p>

2.query
页面通过path和query传递参数,该实例中row为某行表格数据

 1 methods:{
 2     go:function(){
 3         this.$router.push({
 4         path:‘/indext‘,
 5       query:{
 6         userId:1
 7       }
 8      })
 9   }
10 },        

目标页面this.$route.query.userId获取数据

<p>{{this.$route.query.userId}}</p>

原文地址:https://www.cnblogs.com/gwkzb/p/12426364.html

时间: 2024-08-30 13:47:07

this.$router.push 传参的相关文章

react router路由传参

今天,我们要讨论的是react router中Link传值的三种表现形式.分别为通过通配符传参.query传参和state传参. ps:进入正题前,先说明一下,以下的所有内容都是在react-router V4的版本下. 1.通配符传参 Route定义方式: <Route path='/path/:name' component={Path}/> Link组件: <Link to="/path/通过通配符传参">通配符</Link> 参数获取: th

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

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

Flutter路由跳转父级页面向子页面传参及子页面向父级页面传参

Flutter中页面通过路由跳转传参主要分两种,一种是通过push()跳转时根据设定的参数进行传参,另一种是通过pop()返回时进行传参. 父级页面向子页面push()传参 假设从A页面跳到B页面可能需要携带参数userName和userAge这两个参数,那么需要在B页面先设置这两个参数名:假设userName必须填而userAge非必需,那么可以通过设置@required其为必填选项: class PageB extends StatefulWidget { @override final u

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-router的传参方式和router使用技巧

vue传参方法一 1,路由配置 { path: '/describe/:id', name: 'Describe', component: Describe } 2,使用方法 // 直接调用$router.push 实现携带参数的跳转 this.$router.push({ // 这个id是一个变量,随便是什么值都可以 path: /describe/${id}`, }) 3,获取方法(在describe页面) $route.params.id 使用以上方法可以拿到上个页面传过来的id值 vue

Vue跳转页面传参

1.// 命名的路由 router.push({ name: 'user', params: { userId: 123 }}) ps:params这样的传参前面只能是name 2.// 带查询参数,变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }}) 3.在routes定义path:‘/detail/:id’ 页面:to="/detail/+12345" 取参数的时

手动访问和传参

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <div> <router-link to="/">首页</ro

vue 路由传参的三种基本模式

路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取对应li的数据,显示相应的正确的内容. 父组件中: <li v-for="article in articles" @click="getDescribe(article.id)"> 方案一: getDescribe(id) { // 直接调用$

vue请求中 post get传参方式是不同的哦

我在学习vue,项目中post请求,get请求都用到了,我发现传参方式是不一样的. post请求的例子: checkin (){ this.$http.post('my url',{ mobilePhone:this.phone, password:this.password },{ emulateJSON: true } ).then(function(res){ this.$root.userid=res.data.userid; console.log(this.$root.userid)