VUE跳转携带参数 并且获取参数 this.$router.push({name: ‘ ‘, params:{ 参数：‘ ‘}})

最新推荐文章于 2022-05-07 04:04:49 发布
最新推荐文章于 2022-05-07 04:04:49 发布
阅读量3.2k 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44655358/article/details/108685791
版权

写项目的时候 需要把App.vue里面获取到的openid传递给loginid
搜了一下解决方法
可以使用VUEX
以及父子组件之间传值
但是感觉只需要传递一个参数不需要那么麻烦
所以直接 在route里把参数一起传过去

代码如下
APP.VUE中

this.$router.push({name:'login',params: {openid:toro}});

然后就在login.vue里面取用toro

 this.user.openid=this.$route.params.openid
进击的小宋
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中this.$router.push参数获取方法
08-27
本文将详细解释如何使用`this.$router.push`来传递参数，并讨论两种主要的传递方式：Params和Query。 ### 1. Params（动态路由参数） 动态路由参数通常用于根据特定ID或其他唯一标识符加载详细信息页面。在使用...
vue-router 2.0 跳转之router.push()用法说明
10-14
例如，要导航到命名路由 `user` 并传入参数 `userId`，可以使用 `router.push({ name: 'user', params: { userId: 123 }})`。 3. 查询参数：可以通过 `query` 属性传递查询参数。如 `router.push({ path: '/backend/...
Vuerouter携带参数跳转页面并获取参数
前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！
02-23 1132
vuerouter携带参数跳转 this.$router.push({path:’/121’,query:{id:id}}) 跳转的页面获取参数 let id=this.$route.query.id 返回上一个页面 this.$router.go(-1)
在页面跳转的时候，在跳转后的页面中使用js 获取到 页面跳转的url中携带的参数。...
weixin_30257433的博客
06-19 748
common.js代码 //获取URL中的参数..等等function getQueryString(name){var reg = new RegExp("(^|&)"+name+"=([^&]*)(&|$)");var r = window.location.search.substr(1).match(reg);if(r!=null){return ...
vue页面跳转，以及携带参数，获取参数
斗师——Ace
06-25 3104
js操作路由(即编程式的导航)进行页面跳转： 1. 返回/前进一页： 返回：this.$router.go(-1)、this.$router.back()。 前进：this.$router.go(1) 2. 跳转到其他页： //params只能用name来引入路由,类似于post，在浏览器地址栏中不显示参数， //而query 要用path引入,似于我们ajax中get传参，在浏览器地址栏中显示参数 this.$router.push("/parent") thi...
vue实现页面跳转并传参的八种方法
静幽水
10-10 1万+
我们知道，在vue中每个页面都需要在路由中声明，就是在router/index.js中写下面代码： import Vue from 'vue' import Router from 'vue-router' import Test from "../components/Test"; Vue.use(Router) export default new Router({ mode: 'his...
vue中用this.router.push()路由params传参遇到的页面刷新数据丢失问题
vfjcgg的博客
11-06 9324
最近项目中涉及到跨页面传参数和后台进行数据交互以及用this.router.push()路由params传参遇到的页面刷新数据丢失问题，看到需求之后第一反应就是用路由传参来解决，Vue中提供了三种路由传参方式： 第一种：params传参 this.$router.push({ name:"admin", 　　　　//这里的params是一个对象，id是属性名，item.id是值(可以从当前组件或 者Vue实例上直接取) params:{id:item.id} })
vue从一个页面跳转到另一个页面并携带参数的解决方法
10-16
总结，Vue.js中实现页面跳转并携带参数主要依赖于`this.$router.push()`方法，结合Vue Router的路由配置，以及在目标页面中通过`$route`对象获取并使用这些参数。正确理解和运用这些知识，可以轻松地实现在Vue应用中...
vue router 传参获取不到的解决方式
12-13
this.$router.push({path:'/article',params:this.blogList[index]}); } } 在article中接受不到params mounted(){ console.log(this.$route.params) //这里输出undifined } 导致这样的原因是因为params需要...
vue路由带参跳转至新页面的三种方式
杨丫丫的专栏
08-17 8893
vue路由带参跳转，打开新页面的三种方式： 方式一： 使用path来匹配路由，然后通过query来传递参数，这种情况下 query传递的参数会以?id=XXX的形式显示在url后面
Vue中 this.$router.push 传参 及 参数接收
热门推荐
Silence-Lee的博客
09-02 49万+
文章目录1、两种方式方法一：name跳转页面方法二：path跳转页面2、区别 1、两种方式 方法一：name跳转页面 this.$router.push({name:'anotherPage',params:{id:1}}); 另一页面接收参数方式： this.$route.params.id 示例： 控制台展示： 方法二：path跳转页面 this.$router.push({path:'/anotherPage',query:{id:1}}); 另一页面接收参数方式： this.$route.
vue路由跳转this.$router.push带参数两种方法
m0_49714202的博客
04-21 3417
index.vue html <el-table class="table" :data="tableData" style="width: 100%"> <el-table-column label="" width="1000"> <template slot-scope="scope"> <!-- <div @click="get(scope.$index)"> -
this.$router.push跳转页面携带参数
qq_39176307的博客
05-07 1万+
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、params和query使用方式二、实现代码1.index.js代码2.test.vue代码3.testParams代码4.testParams代码5.效果总结 前言 this.$router.push进行页面跳转时。携带参数有params和query两种方式。 一、params和query使用方式 query方式： this.router.push(path:′testQuery′,query:testQuery:′t.
VueRouter: this.$route.push跳转,携带参数
天涯芳草
04-26 4万+
this.$router.push传递参数有2种方式： 传递参数-- this.$router.push({path: ' 路由 ', query: {key: value}}) 参数取值-- this.$route.query.key 使用这种方式，传递参数会拼接在路由后面，出现在地址栏. 传递参数-- this.$router.push({name: ' 路由的name ', params: {key: value}}) 参数取值-- this.$route.params...
Vue中this.$router.push（参数） 实现页面跳转
吴冬雪的博客
05-22 13万+
由于动态路由也是传递params的，所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效。需要用name来指定页面。很多情况下，我们在执行点击按钮跳转页面之前还会执行一系列方法，这时可以使用。页面通过path/name和query传递参数，该实例中row为某行表格数据。及通过路由配置的name属性访问。来修改 url，完成跳转。
vue 使用 this.$router.push() 传参
卜卦的博客
07-12 6050
1 使用name 和 params this.$router.push({name: 'Journalh', params: {id: obj.id}}) // 获取参数 this.$route.params.id 2 使用path 和 query传参 this.$router.push({path: 'Journalh', query: {id: obj.id}}) // 获取参数 th...
vue this.$router.push()传参
e87e09e11的博客
01-30 10万+
1 params 传参 注意⚠️：patams传参 ，路径不能使用path 只能使用name,不然获取不到传的数据 this.$router.push({name: 'dispatch', params: {paicheNo: obj.paicheNo}}) 取数据：this.$route.params.paicheNo this.$route.params...
Vue中this.$router.push参数获取
zeroyulong的博客
06-05 1万+
传参的两种方式 一、params 由于动态路由也是传递params的，所以在this.$router.push()方法中path不能和params一起使用，否则params将无效。需要用name来指定页面，也就是说除了用path属性跳转页面我们还可以通过路由配置的name属性跳转页面 路由： 跳转页面方式： 如上图中两种方式都可以跳转到指定页面 通过name获取页面，传递par...
Vue中 this.$router.push（） 实现页面跳转及传参
weixin_44781409的博客
01-06 4144
我们在执行点击按钮跳转页面之前还会执行一系列方法，这时可以使用 this.$router.push(location) 来修改 url，完成跳转。 push 后面可以是对象，也可以是字符串： // 字符串 this.$router.push('/viewAgent') // 对象 this.$router.push({ path: '/viewAgent' }) // 命名的路由 this.$r...
Vue3中this.$router.push参数获取方法
最新发布
08-04
在Vue3中，使用`this.$router.push`方法进行路由跳转时，可以通过不同的参数形式进行传递。根据引用[1]中的内容，以下是几种常见的参数获取方法： 1. 参数为字符串，即路径名称： ```javascript this.$router....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值