项目首页增加聊天入口
添加一个消息按钮
Home.vue
<el-header class="header">
<h3 class="title">微人事</h3>
<div>
<el-button icon="el-icon-bell" type="text" style="margin-right: 8px;color: #000000" size="normal" @click="gochat"></el-button>
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link">
{{user.name}}<i><img :src="user.userface" alt=""></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="#">个人中心</el-dropdown-item>
<el-dropdown-item command="#">设置</el-dropdown-item>
<el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-header>
添加点击事件方法
文章来源:https://www.toymoban.com/news/detail-657435.html
gochat(){
this.$router.replace("/chat")
},
创建聊天页面组件
添加路由文章来源地址https://www.toymoban.com/news/detail-657435.html
到了这里,关于微人事项目在线聊天(一)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!