Vue路由跳转之非父子组件关系页面间传参（并自定义跳转目标）

最新推荐文章于 2022-11-08 20:53:15 发布
最新推荐文章于 2022-11-08 20:53:15 发布
阅读量650 收藏 1
点赞数
分类专栏： Vuejs学习 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57249797/article/details/122307504
版权

在做Vue项目之前呢，不知道怎么进行非父子组件关系页面之间的传参，使用的方法也很笨，是改变VueX的值来达到页面跳转监听。

大致思路也就是：点击某个按钮跳转某个页面，点击该按钮的同时去改变VueX的值并在新页面接收，为什么要这样做能，因为我得到的需求是通过一个跳板页面来跳转目标页面，而跳板页面一进入就会发生计时任务，计时任务只能放到mounted里面这样才能一进入页面就执行，带来的问题就是怎么也接收不到VueX的变化值，后来也用了个笨方法解决，

在这里插入图片描述
写个定时方法：
在这里插入图片描述
这样在created钩子函数中是能够接收到VueX的值的
但是既然我们都能通过接收VueX的值，那么是否也能接收页面传过来的值呢？
当然，我们不再借助vue-router跳转，而是采用点击后执行函数：
在这里插入图片描述
也就是通过resolve方法传值，query就是我们传递的值对象，也可以传params
另一个页面就通过以下方式接收就行了
在这里插入图片描述
返回值是字符串（用个let或var定义的变量接收）
写这篇文章的目的就是简单的记录一下学习Vue项目遇到的问题

CharmDeer
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
VUE父子传值非父子传值（组件通信：详解vue传值）
前端程序猿的博客
12-29 667
vue的组件传值详解以及例子
Vue路由切换页面不更新问题解决方案
10-15
主要介绍了Vue路由切换页面不更新问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
两个没有父子关系的html之间如何传递数据
wangjiang87的专栏
03-04 2726
比如说现在有两个毫无关系的html页面：a.html;b.html从a.html跳到b.html时如何在b.html页面中获得a.html传过来的数据呢？代码如下：在a.html中有一个连接指向b.html,转到b在b.html中就可以通过js这样获得name的值var name=window.location.seach(此时name的值为?name=wangzheguilai
Vue2组件通信之非父子关系通信探讨分析一
Xmumu_的博客
03-26 1307
文章目录开篇通过中间组件传递分析父链 开篇 这就接着昨天的内容再来玩一玩非父子关系！这里只谈论两种情况哈 通过中间组件传递 <div id="app"> {{message}} <component-a></component-a> </div> var bus = new Vue(); Vue.component('component-a', { template: '<button @click="handleEve
mysql 合并同类项_vue-router多级路由中无父级组件设置方法
weixin_30233335的博客
02-17 196
原文请点击这里: [https://blockxun.top/2020-01-08-15.html](https://blockxun.top/2020-01-08-15.html)----解决方法：`component: {render: (e) => e("router-view")},`### 需求在一些情况下，会有设置二级路由，但一级路由不需要`component`的特殊需求*比如我...
vue组件间数据传递（vue组件传参），父传子，子传父，非父子组件传值
weixin_64037609的博客
11-08 793
2.子组件接收数据——在子组件的配置对象中 写入 props属性 并将属性值 设置为数组/对象 来接收数据。1.父组件传递数据——在父组件中 给 子组件对象绑定自定义属性 属性值为 要传递的数据。前面我们学习子传父的时候 知道 子组件向父组件传递数据的时候 使用的就是 发布订阅。3.子组件使用数据——在子组件的模板中 直接使用props数组项/属性即可。2.使用事件总线提供的vue实例对象 来进行数据的发布 和 订阅。子组件实例对象自己发布数据 子组件实例对象自己订阅数据。
Angular父子组件通过服务传参的示例方法
10-17
当涉及到跨越路由的父子组件通信时，由于路由跳转可能导致组件实例的销毁，@Input和@Output就不再适用。这时，我们可以利用Angular的服务（Service）来传递参数，确保数据能够在不同层级的组件间顺畅流动。 首先，...
vue子路由跳转实现tab选项卡
12-10
总结来说，实现Vue子路由跳转的tab选项卡布局主要涉及以下几点： 1. 使用`<router-link>`组件创建导航链接，通过`:to`属性指定路由。 2. 在模板中放置`<router-view>`作为内容展示区，它会根据当前激活的路由加载...
vue-router跳转页面的方法
08-31
通过以上内容，你应该对 vue-router 的基本用法有了清晰的理解，包括安装、配置、页面跳转、路由组件以及父子组件间的通信。这些知识将帮助你在 Vue 项目中构建高效且灵活的导航系统。记住，实际应用中可能还需要...
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
10-15
在Vue.js应用中，我们有时会使用自定义事件总线（bus）来实现非父子组件间的通信，特别是在不涉及路由的场景下。然而，当在路由跳转过程中使用bus进行数据传递时，可能会遇到首次跳转时数据未能成功传递的问题。这个...
vue2-0父子组件以及非父子组件通信传参详解
郝峰vip的博客
12-06 380
写在前面 之前每次写项目的时候老是忘记vue的组件之间的传参，很不方便，每次都是现查，趁着这次折腾非父子组件的传参，学习记录下来，以方便以后学习使用。 1.父组件传递数据给子组件 父组件写法 <parent> <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰 </parent> data(...
js文件调用vue页面方法
weixin_43805439的博客
01-08 3667
index.vue import { jsmethod } from 'test.js' methods: { qwe(){}， asd(){ jsmethod(this.qwe) } } test.js export function jsmethod(qwe){ if (qwe) { qwe(); } }
Vue.js+Vue-router.js实现单页面路由跳转spa（不使用vue脚手架）
weixin_48310754的博客
06-14 682
最近在做一个商城项目，想实现单页面路由的跳转，个人中心，侧边栏点击不同名称的跳转不同界面，但是主页面不变，借鉴了他人的项目，实现了此功能。实现此功能使用的是和 我尝试换成更高的版本但是会报出错误，所以暂时旧版本实现。Gitee仓库地址 阿里网盘 二、两种不同形式 1、直接在变量内部构造组件 网上的视频讲解，大多是通过变量内部定义的方式，实现功能，但是不太适用 2、在外部构造组件 1）组件模板 2）构造组件 HTMl部分代码 js配置地址代码 最后 实现效果当前地址...
vue路由重定向根据条件跳转到不同的子路由
brilliantSt的博客
12-27 3085
vue路由根据条件跳转到不同的子路由
49. VUE router-link 标签的属性讲解 和 不通过router-link 实现路由跳转
Bi-Hu的博客
08-12 1140
1.tag 属性 router-link 这个标签如果我们不想让他渲染成 a标签 ，那么我们就可以 tag 属性 ，可以自定义渲染成自己想要的组件： 可以发现 a 标签渲染成了 按钮。 2.replace属性 我们发现 你点击了router-link 标签 然后跳转切换视图的时候，他默认保留历史的 即可以前进/后退，那么证明默认用的是 pushState ,我们如果不想让他可以前进、后退...
vue---component2---组件传参3 之 非相关组件之间传参/跨组件传参--eventBus事件总线（父组件向子组件传、子组件向父组件传、非相关组件之间传参）
DcTbnk的博客
07-09 230
sadfh
redux实现非父子关系的组件之间的传参(基础实现,不使用Provider)
my_love_download的博客
10-11 640
真正开发项目的时候会经常遇到非父子关系的组件需要相互传递参数,这里实现一个基础版本的Redux,实际开发中,不使用Provider是极少的,这里仅仅作为一个复习的基础知识作为记载 1.安装Redux npm install redux 2.项目中配置redux 1.根目录下新建store文件夹,然后在该文件夹下新建index.js文件和reducer.js文件   1.1.index.js文...
vue非父子组件之间传值
qq_42426159的博客
11-01 374
组件通信： 父向子，子向父。翻看 vue基础操作02笔记。 非父子组件之间 在components中定义一个公共的 bus.js文件，里面封装一个vue对象 // 创建一个Vue实例 import Vue from 'vue' export default new Vue() components——>GG.vue ： 两个没有关系的路由组件 <...
自定义v-model事件
Pgy121的博客
09-08 3157
父组件 <template> <div class="home"> <p>{{name}}</p> <v-model v-model="name"></v-model> </div> </template> <script> import vModel from '@/components/HelloWorld' export default { name: 'home',
vue3父子组件路由跳转
最新发布
09-02
在Vue 3中，父子组件之间的路由跳转可以通过使用Vue Router来实现。以下是一种常见的实现方式： 1. 首先，确保你已经安装了Vue Router，并且在Vue应用中进行了配置。 2. 在父组件中，使用 `<router-link>` 组件来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

CharmDeer

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

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

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

打赏作者

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

抵扣说明：

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

余额充值