• 点击v-for出来的元素，跳转页面
• 给元素定义一个click点击事件，跳转页面用到动态路由

• tamplate

@click="toDetailPage(item)"

• methods

toDetailPage(item) {    this.$router.push("/chatDetail/1")}

• 新建页面

• 在src/views新建文件夹chatDetail，在chatDetail文件夹下新建index.vue文件

• 配置路由

• 打开src/router/router.config.js，在children数组内配置路由，记得使用动态路由

{   path: '/chatDetail/:id',   name: 'ChatDetail',   component: () => import('@/views/chatDetail/index'),   meta: { title: '聊天详情', keepAlive: false,showFoot: false }}

• 配置白名单 ps:暂时跳到一个固定的页面

• 打开src/permission.js，把要跳转的路由填写到白名单内

const whiteList = ['/login','/home','/chatDetail/1'] // no redirect whitelist

• 现在点击好友列表就可以跳转过去了

• 下面开始开发聊天详情页面

• 页面分析：
• 分【上、中、下】 三个板块，第一板块是navbar、第二板块是中心区域，可以上下滚动，第三板块是底部发语音，发信息，发表情的区域，先布局