Vue | 实现页面跳转刷新，在Vue页面中调用其他页面的方法

最近有一个登录界面的需求，感觉很简单，尝试各种方法每次都感觉快要成功了，但还是没能解决问题，果然没有系统学习就是很难立刻找到突破点，难以一语中的，好在历经千帆，在页面调用中就解决了这个问题。

需求描述：登录前，顶部导航栏不显示相应tabbar；登录后顶部导航栏显示tabbar。
问题所在：此Vue项目中顶部导航栏Navigate与内容是分开的组件，即界面直接并无关联。
解决需求：需要在展示页里调用顶部导航栏页里的方法，两者之间没有引用关系，根据vue的API发现可以用下面方法实现。
方法描述：实现页面跳转刷新，在Vue页面中调用其他页面的方法，很适合一些没有直接关系的页面之间的函数调用

1.新建一个Utils.js文件

import Vue from 'vue'
export default new Vue

2.在相关页面引入组件

在调用页与被调用页引入Utils.js文件，注意自己的文件路径即可

    // 引入公共组件import Utils from '../config/util';

3.调用页

// 调用方函数
functionA() {Utils.$emit('demo', 'msg');
}

4.被调用页

mounted() {var that = this;Utils.$on('demo', function (msg) {console.log(msg);that.functionB();})
},
methods: {functionB() {this.flag = this.$cookies.get('token')}
}

参考资料
[1]【Vue】在页面中调用其他页面的方法
[2] vue项目如何刷新当前页面
[3] vue项目中，定义并使用全局变量，全局函数
[4] Vue如何获取当前页面的url,获取路由地址
[5] vue中使用localStorage存储信息

Vue | 实现页面跳转刷新，在Vue页面中调用其他页面的方法相关推荐

razor页面跳转_如何在Blazor中使用Razor页面创建单页应用程序
razor页面跳转 In this article, we are going to create a Single Page Application (SPA) using Razor pages ...
微信小程序页面跳转刷新方式
1.switchTab跳转刷新 uni.switchTab({url: '/pages/staffWork/staffWork',success: function(e) {var page = ge ...
vuejs页面跳转_【Vue 学习】 VueJS 生命周期
一.概述 Vue 的生命周期可以分为 8 个生命周期的执行点,从 new 创建 Vue 对象到对象的销毁,其中 4 个基本的,4 个特殊的,在下图中,红色标注的就是 8 个生命周期的执行点,前四个为基 ...
vue里面怎么实现页面跳转_vue页面跳转如何实现 vue页面跳转实现代码
vue页面跳转如何实现?本篇文章小编给大家分享一下vue页面跳转实现代码,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 一.this.$router. ...
vue页面重置和刷新（vue数据重置）
一.this.reload()方法(体验度好,无空白页面,相当于页面数据重置) 1.在app.vue文件中配置: <template><!-- 给全局挂载适配元素 app --&g ...
nuxt页面跳转_nuxt 项目如何解决组件复用时页面不刷新的问题
组件复用会在两种情况下发生: 1.使用 keep-alive 时,页面再次跳转时,数据不更新每一次路由的切换都会导致页面被重新渲染,无论是各种钩子还是异步获取数据函数都会被执行,为了提高网站性能,可 ...
关于微信小程序跳转页面后不刷新问题，和页面跳转后左上角还保留了之前的页面，和存在返回按钮的解决方法
在微信小程序的页面跳转上,可能大多数的情况下会在一级子页面使用 wx.navigateTo跳转到二级页面,会从二级页面返回主页面或则从三级页面提交数据后返回主页面,为了良好的客户使用效果,在一二级页面 ...
iframe页面跳转刷新父页面窗口问题
前言实际工作中遇到了iframe里嵌套的页面的跳转问题,上网查了一下,现在查到的做一下记录. 正文先假设A,B,C,D都是页面,D是C的iframe,C是B的iframe,B是A的iframe,在 ...
vue的method函数互引用_vue 在methods中调用mounted的实现操作
vue 在methods中调用mounted的实现操作首先可以在data中先声明一个变量比如 sureDelBox : ' ' mounted 中 ---> methods 中 ---> ...

Vue | 实现页面跳转刷新，在Vue页面中调用其他页面的方法

1.新建一个Utils.js文件

2.在相关页面引入组件

3.调用页

4.被调用页

Vue | 实现页面跳转刷新，在Vue页面中调用其他页面的方法相关推荐

最新文章

热门文章