Vue页面与页面之间的传值（router.push()编程式导航）

2024-06-05 18:51:48

页面与页面之间跳转传值，其实我们一般用两种，query传参或者用params

其实这两个方式都是页面导航的一种，编程式导航：通过调用JavaScript形式的API实现导航的方式，大家不了解的可以去官网看下，比较基础的东西。

其实就是用了router.push()方法，来实现页面之间的传值，只不过有不同的参数规则。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

这边先列出这个router.push()方法的一些参数规则

字符串(路径名称)

router.push('/home')

对象

router.push({path:'/home'})

主要是下面两种

命名的路由({传递参数})

router.push({name:'/user',params:{userId:1}})//在组件使用
this.$router.push({name: '注册路由时设置的name', params: {参数名: '参数值'})
//接收
var abc = this.$route.params.参数名

带查询参数，变成/productDetail?goodId=123

router.push({path:'productDetail',query:{goodId:'123'}})//在组件使用
this.$router.push({path: '/', query: {参数名: '参数值'})
//接收
var abc = this.$route.query.参数名

注意点：
1.使用params时不能使用path，如果提供了 path，params 会被忽略。还有就是你使用params的时候，你要保证你在router文件夹里的路由文件那边配置了name属性，要不然会提示name不存在，因为有些帖子下面会有人问这些问题。
2.使用用params去传值的时候，在页面刷新时，参数会消失，用query则不会有这个问题，特别是类似这种商品详情页面这种类似的场景的时候，要特别注意下。

其实最好的研究方式就是官网看下，讲的都很详细，还有一些注意点。
有兴趣的可以点击过去看下
https://router.vuejs.org/zh/guide/essentials/navigation.html

个人水平有限，有问题欢迎大家留言指导，仅供学习和参考。

学海无涯！努力二字，共勉！

Vue页面与页面之间的传值（router.push()编程式导航）相关推荐

页面导航的两种方式——声明式导航、编程式导航||vue-router编程式导航||router.push() 方法的参数规则
页面导航的两种方式 vue-router编程式导航编程式导航基本用法 <!DOCTYPE html> <html lang="en"><head&g ...
Vue.js-Day05【安装路由（vue-router）、如何使用vue-router、404配置、激活class、动态路由、编程式导航、路由嵌套、路由元信息、导航拦截】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 1.单页面应用 1.1.多页面应用 1.2.单页面应用 1.3.vue-router 2.安装vue-rout ...
前端笔记(11) Vue3 Router 编程式导航 router.push router.replace
什么是编程式导航? 在上篇博客Vue3 Router 监听路由参数变化中,我们使用 <router-link> 创建 a 标签来定义导航链接: <router-link to=&qu ...
vue编程式导航，命名路由
//使用 window.location.href 的形式,叫做编程式导航绑定事件的形式 <template><div class="goods-item" ...
vue编程式导航跳转到当前路由多次执行抛出NavigationDuplicated: Avoided redundant navigation to current location:
为什么? push方法会返回一个Promise对象,内部会进行跳转成功或失败的回调解决方法只需在push方法末尾传递两个成功和失败的回调函数,可以捕获到当前的错误,可以解决.但是此种方法治标不治本 ...
vue声明式导航和编程式导航
声明式导航: 声明式导航是写在template标签里,通过<router-link></router-link>标签来触发: <router-link to=" ...
vue组件和iframe之间的传值-传值总结
前情提要:由于项目需要,我需要引入一个报表的插件.插件只能使用html的方式调用. 所以,我把插件的使用封装了一个html页面,vue项目则利用iframe的方式引入. 在项目进行过程中,需要ifra ...
Vue案例：组件之间的传值问题
案例最终效果如下: 主要解决父子组件之间的传值,以及子组件如何"修改"父组件data的问题.主要代码片段如下:  <div id=&quo ...
跨域传值即主页面与iframe之间互相传值
需求一:主页面A 怎么向 iframe B 传递数据呢? 这种方式,是主页面需要给 iframe B 传递数据,然后 iframe B 获得到数据后进行特定的处理实现方式实现的技巧就是利用 loc ...

最新文章

热门文章