热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

登录vuejs后重新渲染导航栏

如何解决《登录vuejs后重新渲染导航栏》经验,为你挑选了1个好方法。

我正在尝试使用vue创建客户端登录,我有一个主要组件,嵌套的是导航栏和呈现内容的组件。在创建导航组件时,我检查用户是否已登录以显示访客按钮并隐藏保护部分的按钮我的问题是在登录组件上提交登录后,我不知道如何触发导航栏组件的重新重新显示以显示正确的按钮

我不知道我的主要组件上是否应该有一个全局变量,还是应该找到一种方法将事件从子对象发送到父亲,再将另一个事件从主组件发送到导航栏,或者更多呢?简单但我不知道

如果您需要更多信息,请提前告知我



1> Mirdrack..:

主要问题是如何在相同层次结构的组件之间建立通信,以解决我实现的问题以及Vue.js文档中描述的事件总线方法:

https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication

我只是创建了一个名为EventBus的Vue新实例。

// EventBus.js
import Vue from 'vue'
export default new Vue()

然后将其全局包含在我的主要Vue实例中

// main.js
import EventBus from './EventBus'
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productiOnTip= false

Vue.prototype.$bus = EventBus

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    template: '',
    components: { App }
})

这样,我可以在我的组件上发出事件,并在具有相同层次结构的其他组件上监听它们,如下所示:

// Login.Vue
import axios from 'axios'
export default {
     name: 'login',
     data () {
         let data = {
             form: {
                  email: '',
                  password: ''
             }
         }
         return data
     },
    methods: {
        login () {
            axios.post('http://rea.app/login', this.form)
            .then(respOnse=> {
                let respOnseData= response.data.data
                this.$localStorage.set('access_token', responseData.token)
                this.$bus.$emit('logged', 'User logged')
                this.$router.push('/')
            })
            .catch(error => {
                if (error.response) {
                    console.log(error.response.data)
                    console.log(error.response.status)
                    console.log(error.response.headers)
                }
            })
        }
    }
}

我可以在其他组件上监听触发的事件,从而在create方法上设置监听器,如下所示:

// NavBar.js
export default {
     template: '',
     name: 'navigation',
     data () {
         return {
             isLogged: this.checkIfIsLogged()
         }
     },
     created () {
         this.$bus.$on('logged', () => {
             this.isLogged = this.checkIfIsLogged()
         })
     }
 }

希望可以作为参考


推荐阅读
  • vue使用
    关键词: ... [详细]
  • IhaveconfiguredanactionforaremotenotificationwhenitarrivestomyiOsapp.Iwanttwodiff ... [详细]
  • Java太阳系小游戏分析和源码详解
    本文介绍了一个基于Java的太阳系小游戏的分析和源码详解。通过对面向对象的知识的学习和实践,作者实现了太阳系各行星绕太阳转的效果。文章详细介绍了游戏的设计思路和源码结构,包括工具类、常量、图片加载、面板等。通过这个小游戏的制作,读者可以巩固和应用所学的知识,如类的继承、方法的重载与重写、多态和封装等。 ... [详细]
  • 本文介绍了解决Netty拆包粘包问题的一种方法——使用特殊结束符。在通讯过程中,客户端和服务器协商定义一个特殊的分隔符号,只要没有发送分隔符号,就代表一条数据没有结束。文章还提供了服务端的示例代码。 ... [详细]
  • Linux重启网络命令实例及关机和重启示例教程
    本文介绍了Linux系统中重启网络命令的实例,以及使用不同方式关机和重启系统的示例教程。包括使用图形界面和控制台访问系统的方法,以及使用shutdown命令进行系统关机和重启的句法和用法。 ... [详细]
  • 本文讨论了一个关于cuowu类的问题,作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案,并给出了两个可能导致错误的原因。 ... [详细]
  • 怀疑是每次都在新建文件,具体代码如下 ... [详细]
  • WebSocket与Socket.io的理解
    WebSocketprotocol是HTML5一种新的协议。它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送 ... [详细]
  • Redis底层数据结构之压缩列表的介绍及实现原理
    本文介绍了Redis底层数据结构之压缩列表的概念、实现原理以及使用场景。压缩列表是Redis为了节约内存而开发的一种顺序数据结构,由特殊编码的连续内存块组成。文章详细解释了压缩列表的构成和各个属性的含义,以及如何通过指针来计算表尾节点的地址。压缩列表适用于列表键和哈希键中只包含少量小整数值和短字符串的情况。通过使用压缩列表,可以有效减少内存占用,提升Redis的性能。 ... [详细]
  • 李逍遥寻找仙药的迷阵之旅
    本文讲述了少年李逍遥为了救治婶婶的病情,前往仙灵岛寻找仙药的故事。他需要穿越一个由M×N个方格组成的迷阵,有些方格内有怪物,有些方格是安全的。李逍遥需要避开有怪物的方格,并经过最少的方格,找到仙药。在寻找的过程中,他还会遇到神秘人物。本文提供了一个迷阵样例及李逍遥找到仙药的路线。 ... [详细]
  • 本文介绍了Oracle存储过程的基本语法和写法示例,同时还介绍了已命名的系统异常的产生原因。 ... [详细]
  • 本文介绍了Codeforces Round #321 (Div. 2)比赛中的问题Kefa and Dishes,通过状压和spfa算法解决了这个问题。给定一个有向图,求在不超过m步的情况下,能获得的最大权值和。点不能重复走。文章详细介绍了问题的题意、解题思路和代码实现。 ... [详细]
  • STL迭代器的种类及其功能介绍
    本文介绍了标准模板库(STL)定义的五种迭代器的种类和功能。通过图表展示了这几种迭代器之间的关系,并详细描述了各个迭代器的功能和使用方法。其中,输入迭代器用于从容器中读取元素,输出迭代器用于向容器中写入元素,正向迭代器是输入迭代器和输出迭代器的组合。本文的目的是帮助读者更好地理解STL迭代器的使用方法和特点。 ... [详细]
  • linux进阶50——无锁CAS
    1.概念比较并交换(compareandswap,CAS),是原⼦操作的⼀种,可⽤于在多线程编程中实现不被打断的数据交换操作࿰ ... [详细]
  • 本文介绍了使用C++Builder实现获取USB优盘序列号的方法,包括相关的代码和说明。通过该方法,可以获取指定盘符的USB优盘序列号,并将其存放在缓冲中。该方法可以在Windows系统中有效地获取USB优盘序列号,并且适用于C++Builder开发环境。 ... [详细]
author-avatar
手机用户2502938557
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有