this.$route.query和this.$router.push

最新推荐文章于 2025-08-31 00:32:52 发布
原创 最新推荐文章于 2025-08-31 00:32:52 发布 · 784 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #网络

本文介绍了Vue.js中`this.$route.query`用于获取路由参数的用法，以及`this.$router.push`进行路由跳转的实现。示例展示了如何在路由中传递和接收id参数，并通过`this.$router.push`实现页面间的导航。了解这些概念对于掌握Vue应用的页面间交互至关重要。

this.$route.query

this.$route.query用于获取一个路由的参数

  

示例如上:这段路由中的 : 就是对应下方JS代码中的 this.$route.query中所需的参数,这里传输的数据是id,下方JS的代码如下:

 

this.$router.push

this.$router.push用在路由地址的跳转,后面跟上要跳转的路由地址

 

 补充

代表直接跳转 

this.$router路由params、query传参
前端小菜鸟的成长记录
10-13 2596
路由跳转传参
Vue中this.$router.push参数获取
无双孟堂的博客
09-23 11万+
传递参数的方法： 1.Params 由于动态路由也是传递params的，所以在 this.$router.push() 方法中 path不能和params一起使用，否则params将无效。需要用name来指定页面。 及通过路由配置的name属性访问 在路由配置文件中定义参数： 通过name获取页面，传递params： 在目标页面通过this.$route.para
vue中this.$route.query和this.$route.params
qq_33718889的博客
05-05 4037
routes: [ // 写法 (1) { //在路由中显示传递的参数 path: '/skipIn/:name/:age', //传递两个参数 name: 'SkipIn', //跳转页面的名字 component: SkipIn //注册组件 }, // 写法 (2) // { // path: '/skipIn', ...
Vue中this.$router.push（参数） 实现页面跳转
吴冬雪的博客
05-22 13万+
由于动态路由也是传递params的，所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效。需要用name来指定页面。很多情况下，我们在执行点击按钮跳转页面之前还会执行一系列方法，这时可以使用。页面通过path/name和query传递参数，该实例中row为某行表格数据。及通过路由配置的name属性访问。来修改 url，完成跳转。
this.$route.query
weixin_51244498的博客
09-14 593
http://localhost:8080/foredit/121123323 方法：这种的URL就需要使用this.$route.params.id http://localhost:8080/?pipe=ajdfyuafduyagddsa 方法:如果是这种的URL就需要使用this.$route.query
this.$route.query和this.$route.params的正确使用
写代码的姜总的博客
08-17 643
【代码】this.$route.query和this.$route.params的正确使用。
this.$route.query的使用
weixin_37150764的博客
02-16 6743
1、router/index.js {undefined path:'/mtindex', component: mtindex, //添加路由 children:[ {undefined path:':shopid', component:guessdetail } ] }, 2、传参数 this.$router.push({undefined pa
vue中this.$route.query和this.$route.params & query传参和params传参的使用和区别
m0_49515138的博客
02-16 3355
*注意：**这里的12和ls 对应的是/:id/:name 这两个参数可以不写 那么就不会在地址栏上显示 不过刷新页面参数会消失 写上参数刷新页面 参数不会消失。使用computed属性和Date()可以保证每一次的key都是不同的，这样就可以如愿刷新数据了。this.$route.query.name 和 this.xxxx.params.name。2.params必须要用name来引入，接收参数都是类似的,分别是。中 this.route.query 和 this.
vue中this.$route.query和this.$route.params & query传参和params传参的使用和区别
weixin_44867717的博客
11-18 3万+
vue中this.route.query和this.route.query和this.route.query和this.route.params & query传参和params传参的使用和区别 1.query传参： 路由： var router = new VueRouter({ routes: [ { path: '/login', component: login }, { name:'register',path: '/register'
this.$route.query与this.$route.params
青春不打烊的博客
06-07 417
一、this.$route.query的使用 1、router/index.js { path:'/mtindex', component: mtindex, //添加路由 children:[ { path:':shopid', component:guessdetail } ] }, 2、传参数 this.$router.push({ pa...
vue之this.$route.query和this.$route.params的使用与区别
鸡血博客
12-10 1187
一、this.$route.query的使用 1、router/index.js { path:'/mtindex', component: mtindex, //添加路由 children:[ { path:':shopid', com...
前后端知识总结3--Vue2 Class Component与this.$router.push
最新发布
weixin_73803533的博客
08-31 423
vue-class-component 是一个用于 Vue.js 的类装饰器，它允许你使用 TypeScript 的类语法来定义 Vue 组件。这样做的好处是能够更好地利用 TypeScript 的类型检查和自动补全功能，同时使代码结构更加清晰。简单来说，vue-class-component 让你用面向对象的方式来写 Vue 组件，而不是传统的选项式 API。这样不仅增强了代码的可读性，还能更好地组织代码逻辑。在 Vue2 中，组件通常通过一个对象来定义，这种方式被称为选项式 API。
Vue中 this.$router.push 传参 及 参数接收
热门推荐
Silence-Lee的博客
09-02 50万+
文章目录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获取url中的参数值,this.$route.query
qq_45516629的博客
05-21 1万+
如果有的参数可传可不传，可以使用？传参 例如：http://192.168.1.12:8080/#/detail/?id=123 获取的时候： let id = this.$route.query.id 一、在vue组件单页面中获取页面参数 watch: { "$route.query": { handler() { if (this.$route.query) { // this.departmentDid 是在
this.$router.push
weixin_37150764的博客
02-27 2182
路由传值 this.$router.push() （1） 想要导航到不同的URL，使用router.push()方法，这个方法会向history栈添加一个新纪录，所以，当用户点击浏览器后退按钮时，会回到之前的URL （2）当点击 时，这个方法会在内部调用，即点击 等同于调用 router.push(…) 　　a)声明式： 　　b)编程式：router.push(…) c)该方法的参数可以是一个字符串路径，或者一个描述地址的对象。 // 字符串 router.push(‘home’) // 对象 ro
Vue之this.$route.query和this.$route.params的使用与区别
zhanglei892721的博客
03-29 1697
query:{id:id,}）id=1params:{id:id,}）this.$route.params.id　http://localhost:8090/#/trading1.传参：
vue路由$router.push()使用query传参的实际开发笔记
奶厂小程的博客
10-28 5476
vue的使用，vue-router路由组件的使用，vue路由$router.push()，query需要与path结合
this.$route和this.$router区别
04-23
需要检查是否有遗漏的重要点，例如两者的类型（$router是Router实例，$route是Route对象）、常用的方法（push、replace、go等）和属性（params、query、path等）。同时，需要注意用户可能混淆这两个概念，所以要通过...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值