vue 路由之间携带参数跳转

最新推荐文章于 2024-04-29 20:03:13 发布
最新推荐文章于 2024-04-29 20:03:13 发布
阅读量2.2k 收藏 2
点赞数 2
分类专栏： vue前端专栏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37591637/article/details/90168621
版权

举个例子，从A.vue文件跳转到B.vue文件

A.vue

1、path:"/onetopic" 是router文件夹下面index.js/router.js 里面配置的路径名

this.$router.push({

path:"/onetopic",

query:{

id:id

}

})

 2、记住是query:{}；我一直以为是什么不重要，

3、id(参数名):变量名

B.vue

var id= this.$route.query.id;

 

注意：导入import router from "../../router/router.js";

qq_37591637
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue路由跳转的方式与传递参数
weixin_45932733的博客
12-02 181
1.用<router-link>创建路由跳转 默认情况下与<a>标签效果相同 to为需要跳转到的位置 例子 // 1.to可以为一个字符串 <router-link to="home">Home</router-link> // 2.也可动态的绑定一个变量字符串 <router-link v-bind:to="'home'">Home</router-link> // 3.动态绑定一个对象 <router-link :to="
vue实现路由监听和参数监听
12-13
1、路由携带数据跳转 routerAction(hideDisplays, data) { switch (hideDisplays) { case "pubAccountMenu": this.$router.push({ name: "AppAccountInfo", }); break; //在菜单路由上存储各种需要信息 ...
详解vue 路由跳转四种方式 (带参数)
12-29
1.  router-link 1. 不带参数 //name,path都行, 建议用name // 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。 2.带参数 // params传参数 (类似post) // 路由配置 path: /home/:id 或者 path: /home:id
vue路由跳转传递参数的方式总结
01-19
日常业务中，路由跳转的同时传递参数是比较常见的，传参的方式有三种： 1）通过动态路由方式 //路由配置文件中 配置动态路由 { path: '/detail/:id', name: 'Detail', component: Detail } //跳转时页面 var id = 1; this.$router.push('/detail/' + id) //跳转后页面获取参数 this.$route.params.id 2）通过query属性传值 //路由配置文件中 { path: '/detail', name: 'Detail', component
vue路由传参的8种方式！！！
最新发布
m0_74830901的博客
04-29 1800
我们在开发单页面应用时，有时需要进入某个路由后基于参数从服务器获取数据，那么我们首先要获取路由传递过来的参数，从而完成服务器请求，所以，我们需要了解路由传参的几种方式，以下方式同。
VUE路由跳转传参
每天都想吃好吃的
07-08 124
1、实现页面跳转并传参有多种方式：在template中可以使用标签实现跳转，跳转的路径是http://localhost:8080/t?index=id，如下： 只需要点击按钮就可以实现跳转，不需要写js代码，需要传递参数的话只需要即可，这样的话跳转的页面获取参数通过能够获取到完整的url,然后截取参数。也可以通过下面代码获取参数 2、跳转的路径是http://localhost:8080/t?index=id 其中需要注意，这里的to前面一定要加冒号，path的值要和上面路由定义的
vue 路由跳转携带参数
小白成长记
06-29 2万+
vue 路由跳转携带参数的方式：一、 方式跳转，1. 携带query参数，2. 携带params参数，3.将参数转换为props属性；二、编程方式跳转路由
Vue界面跳转传递参数
m0_62990162的博客
11-02 4080
Vue-Router路由携带参数跳转3种方式大全，刷新页面参数不丢失，不显示到地址url中
coderYYY的博客
11-11 6183
此博客将详细介绍Vue-router传参的方法大全
vue从一个页面跳转到另一个页面并携带参数的解决方法
10-16
总结，Vue.js中实现页面跳转并携带参数主要依赖于`this.$router.push()`方法，结合Vue Router的路由配置，以及在目标页面中通过`$route`对象获取并使用这些参数。正确理解和运用这些知识，可以轻松地实现在Vue应用中...
Vue页面跳转传递参数及接收方式
11-19
最近接触了vue项目，这里记录一下vue跳转到下一页面携带参数的两种方式。 典型应用场景：列表页跳转到详情页 一、配置路由 文件路径：src/router/config.php import Vue from 'vue' import Router from 'vue-router...
路由技术解决页面跳转问题
01-19
　页面跳转路由技术，算来并不是一个很新的技术，但却是一项有用的技术。在网站有很多需要跳转的页面，而我们又需要动态地在主页面中加载子页面时，就会用到这门技术。以我们公司现在这个项目为例，前台是由FLEX实现...
一文详解Vue中实现路由跳转传参的4种方式（十分详尽）
青春木鱼的博客
08-01 2万+
在浏览器中，点击链接实现导航的方式，叫做声明式导航。例如：普通网页中点击 a标签链接。vue项目中点击router-link标签链接都属于声明式导航。在浏览器中，调用API方法实现导航的方式，叫做编程式导航。例如：普通网页中调用location.href跳转到新页面的方式，属于编程式导航。vue项目中编程式导航有this.$router.push(),this.$router.replace(),this.$router.go()。
路由跳转常用的三种携带参数的方式
夜轻狂的博客
06-08 2279
3.第三种，参数不会暴露在url地址中，获取参数用this.$router.params。2.第二种，参数也会拼接在url中，获取参数用this.$route.query。1.第一种，参数会拼接在url中，获取参数用this.$route.query。例：this.$router.params.row。
Vue——携带参数跳转路由
weixin_57445851的博客
02-29 639
学会在路由跳转的时候传递参数
vue 路由跳转四种方式 (带参数)
热门推荐
jiandan1127的博客
01-09 12万+
1. router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。 2.带参数 ...
【vue】vue路由传参的三种方式
hello world_
10-22 8万+
前言 vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时，携带参数跳转。传参方式可划分为 params 传参和 query 传参，而 params 传参又可分为在 url 中显示参数和不显示参数两种方式，这就是vue路由传参的三种方式。 方式一：params 传参（显示参数） params 传参（显示参数）又可分为 声明式 和 编程式 两种方式 1、声明式 router-link 该...
路由跳转四种方法（带参）
weixin_46453039的博客
07-13 1万+
vue中的四种路由跳转页面方法
vue路由携带参数跳转
05-01
Vue路由携带参数跳转非常简单，我们只需要使用Vue路由的编程式导航方式即可实现。在需要跳转的方法中，使用router.push方法，该方法可接受一个对象作为参数，其中包括两个属性：path和query。 其中path表示路由的路径，可以是一个字符串常量，也可以是一个带参数的变量，例如： ``` router.push({ path: '/users/' + userId }) ``` query属性表示要传递的参数，可以是一个对象，例如： ``` router.push({ path: '/users/', query: { id: userId, name: 'John' }}) ``` 在被跳转的页面中，我们可以使用$route对象来获取传递的参数，例如： ``` props: ['id', 'name'], created() { console.log(this.id); // 输出传递的id参数的值 console.log(this.name); // 输出传递的name参数的值 }, ``` 同时，我们也可以使用$route.query来获取传递的参数： ``` created() { console.log(this.$route.query.id); // 输出传递的id参数的值 console.log(this.$route.query.name); // 输出传递的name参数的值 }, ``` 以上就是Vue路由携带参数跳转的基本方法。当然，在实际开发中，我们还可以使用其他高级的技巧，例如在路由配置中使用props来获取参数等。总之，Vue路由携带参数跳转非常方便，我们可以根据需求选择最合适的方法来实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

qq_37591637

请给我持续更新的动力~~

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

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

打赏作者

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

抵扣说明：

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

余额充值