路由:index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Wechat from "../views/Wechat.vue";
const routes = [
{
path: '/',
component: Wechat
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
views:Wechat.vue主页面
<template>
<div id="app">
<!-- <h1>{
{msg}}</h1>-->
<div class="content">
<chatcom :currentuser="currentuser"></chatcom>
<!-- chooseuser子组件传过来的数据-->
<userlistcom @chooseuser="toggleuser" :userlist="userlist"></userlistcom>
</div>
</div>
</template>
<script>
//导入组件
import Chatcom from "../components/Chatcom";
import Userlistcom from "../components/Userlistcom";
export default {
name: "Wechat",
//导出组件
components:{
Chatcom,
Userlistcom
},
data(){
return{
// msg:"聊天室",
userlist:[
{
username:"小明",
headerimg:require("../assets/img/1.jpg")
},
{
username:"小黑",
headerimg:require("../assets/img/2.jpg")
},
{
username:"小红",
headerimg:require("../assets/img/3.jpg")
},
{
username:"小白",
headerimg:require("../assets/img/4.jpg")
}
],
//当前用户
currentuser:{
username:"小明",