Vue+$route 页面跳转传参

最新推荐文章于 2021-11-05 13:43:40 发布
最新推荐文章于 2021-11-05 13:43:40 发布
阅读量210 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fyydashen/article/details/110900540
版权
这篇博客探讨了在前端开发中，如何在父页面通过`$router.push`进行参数传递，然后在子页面利用`$route.query`获取并使用这些参数。详细介绍了具体的代码实现，包括查询对象的访问和特定属性的获取，为前端开发者提供了清晰的指导。
摘要由CSDN通过智能技术生成

父页面代码，传值操作：

goToDetail(row) {
  this.$router.push({
    path: "assetdetail",
    query: { alias: row.name, id: row.id }
  })
}

子页面代码，取值操作：

// 取query对象值
this.$route.query
// 取query具体属性值
this.$route.query.alias
this.$route.query.id

 

写bug断了电
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue vue-route 传参 $route.params
weixin_30438813的博客
08-22 208
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue-router</title> </head> <body> <div id="app"> &l...
vue路由 $router跳转
weixin_43549976的博客
10-24 138
vue路由 $router跳转 页面跳转： 在src/views里新建项目文件夹,新建vue文件 <templent> <div> <!-- 第一种：this.$router.push() (函数里面调用) --> <el-button type="primary" @click="rout()">$router</el-button> <!-- 第二种：router-link --> <router-lin
vue $router路由跳转方式 --带参数
weixin_47239395的博客
08-13 3477
方法: push()和replace()跳转 this.$router.push()和this.$router.replace()用法一致 1. 不带参数 this.$router.push('/login') //this.$router.replace('/login') this.$router.push({name:'login'}) //this.$router.replace({name:'login'}) this.$router.push({path:'/login'
AngularJS基础总结（二） 之页面跳转Route
qq_32190375的博客
12-28 654
AngulagJs的页面使用Route跳转1.除了引用AngularJs.js外，还要引用路由JS, <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>／／AngularJs.js <script src="http://apps.bdimg.com/lib
详解vue 路由跳转四种方式（转载）
友人C君的博客
09-19 1082
1、router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。 2.带参数 &...
Vue+路由+导航和传参+示例
最新发布
02-26
Vue Router 提供了丰富的功能，如导航、参数传递、动态路由和嵌套路由等，使得在单页面应用程序（SPA）中实现页面间的导航变得简单易行。 1. **Vue Router的基本概念**： - **Route（路由）**: 定义了URL与组件...
Vue页面跳转传递参数及接收方式
10-14
在Vue.js应用中，页面之间的跳转和参数传递是非常常见的操作。这有助于在不同组件间共享数据，特别是在大型单页应用程序（SPA）中。本文将详细介绍两种在Vue中实现页面跳转并传递参数的方法，以及如何接收这些参数。...
浅析vue-router jquery和params传参(接收参数)$router $route的区别
10-18
- 它可以用来实现页面的跳转，具体方法有 `$router.push` 和 `$router.replace`。 - `$router.push` 方法用于编程式的、向history栈中添加一个新的记录。 - `$router.replace` 方法作用是跟 `$router.push` 类似，...
vue $router和$route的区别详解
01-22
route相当于当前正在跳转的路由对象。。可以从里面获取name,path,params,query等。。 打印this.$route和this.$router。 路由传参的方式 1.可以手写完整的path： this.$router.push({path:`/user/$
vue路由对不同界面进行传参及跳转的总结
10-17
本文将详细讲解如何使用 Vue Router 进行界面间的传参与跳转，以及不同传参方式的优缺点。 首先，Vue Router 提供了两种主要的传参方式：`query` 和 `params`。这两种方式都可以实现页面间的参数传递，但它们在使用...
this.$route.query和this.$route.params的正确使用
qq_43436117的博客
02-01 2万+
1.this.$route.query的使用 (1)、传参数： this.$router.push({ path: '/checkout', query:{ productId:id, } }） (2)、获取参数： this.$route.query.productId (3)、在url中形式（url中带参数） http://xxx/#/goodsDetails?productId=150642571432849 (
Vue项目中通过路由实现页面间参数的传递
糖果π
11-05 7198
在Vue项目开发中，页面之间传递参数有很多种方法 1.路由传递 // params单个参数传递 // 设置参数 catid this.$router.push({ name: '/article/category', params: {catid: '10'} }) // 获取参数 catid this.$route.params.catid // 多个参数传递 // 设置参数 catid this.$router.push({ name: '/article/categ
vue路由之$router跳转
bajiucoding
07-14 755
场景：A和B两个页面之间跳转，在A中点击按钮跳转到B ，包括传递参数和不传递参数多种情况。 // 路由文件 { path: '/home/pageB', name: 'indexB', component: () => import('../home/pageB.vue'), meta: { title: '页面B', } // A页面中 // 直接在html中声明。可以在后边跟上replace，表示是替换。replace写在双引号外边
Vue中this.$router.push（参数） 实现页面跳转
热门推荐
吴冬雪的博客
05-22 13万+
由于动态路由也是传递params的，所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效。需要用name来指定页面。很多情况下，我们在执行点击按钮跳转页面之前还会执行一系列方法，这时可以使用。页面通过path/name和query传递参数，该实例中row为某行表格数据。及通过路由配置的name属性访问。来修改 url，完成跳转。
this.$router 的三种跳转页面方法
黑白两客
10-28 1万+
第一种： this.$router.push('需要跳转到的路径名称') 此方法跳转后，会在历史栏目中保存路劲地址，当点击历史标签时可以进行访问 第二种： this.$router.replace('需要跳转到的路径名称') 此方法跳转后，会在历史栏目中不保存路劲地址，当点击历史标签时不可以进行访问 第三种： this.$router.go('需要跳转到的步数') // 步数可以为正 ，也可为负数 此方法需要设置跳转的步数，可为正为负。 同时可以结合 以上的两种方法搭配使用，形成页面的过
（六）route页面跳转
w_t_y_y的博客
05-08 1420
一、route 二、demo： 跳转页面使用router的push方法切换路由，path为跳转后的路由，query为携带的参数； 跳转页面： methods:{ update(user) { this.saveSearchData(); this.$router.push({ path: "/sessionstore/detail", ...
vue的跳转方式（打开新页面）及传参
盖世小可爱的博客
09-15 808
1. router-link跳转 // 直接写上跳转的地址 <router-link to="/detail/one"> <span class="spanfour" >link跳转</span> </router-link> // 添加参数 <router-link :to="{path:'/detail/two', query:{id:1，name:'vue'}}"> </router-link>
Vue 使用 vue-router 跳转页面
唐策的博客
03-23 1万+
使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。 官方文档： https://router.vuejs.org/zh-cn/essentials/getting-started.html 有很多朋友找我要 demo，但是博客中的这个案例被我删掉了，我只好随手写了一个超简单的 demo，希望能有...
vue之路由传参的三种基本方式
杨丫丫的专栏
08-19 780
三种基本方式介绍如下： 现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据 <div v-for="(item,index) in projectList" @click="goToPage(item.id)"> 方案一： 直接调用$router.push 实现携带参数的跳转 goToPage(id) { this.$router.p...
vue router-link 页面跳转 传参 取参
06-01
在 Vue.js 中，我们使用 Vue Router 来进行路由管理和页面跳转。其中，`router-link` 是 Vue Router 提供的一个组件，用于生成页面内导航链接。 如果你需要在路由跳转时传递参数，可以使用 Vue Router 提供的路由...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

写bug断了电

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值