基于vue2.x实现的即时通讯步伐仿微信谈天4开辟谈天详情静态页面

• 点击v-for出来的元素，跳转页面
  
• 给元素界说一个click点击事故，跳转页面用到动态路由
  
• tamplate
  

@click="toDetailPage(item)"

• methods
  

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

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

<template>  <div>chatDetail</div></template><script>export default {}</script><style lang="scss" scoped></style>

• 设置路由
  
• 打开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、第二板块是中心地区，可以上下滚动，第三板块是底部发语音，发信息，发心情的地区，先结构
  

<template>  <div</blockquote>

• 下面开辟静态的谈天纪录页面结构
  

• 开辟一左一右两种样式，然后根据范例type来区分是本身发的消息 照旧 对方发来的消息
  
• 最好照旧把中心的谈天纪录地区，抽离成组件
  
• 在src/components文件夹下新建一个组件ChatList.vue
  

<template>  <div>谈天地区</div></template><script>export default {}</script><style lang="scss" scoped></style>

• 在chatDetail页面引入该组件
  

//引入import ChatList from '@/components/ChatList.vue'//注册components: { ChatList },//利用<chat-list></chat-list>

• 下面在ChatList组件内开辟
  

template

<template>  <div</blockquote>

• 下面把谈天纪录换成模仿的假数据
  
• data
  

data() {    return {     list:[        {          avatar:"http://erkong.ybc365.com/pic/16671015266174.jpeg",          timer:"10:23:34",          message:"我要去和学弟吃饭了～",          type:1        },        {          avatar:"http://erkong.ybc365.com/pic/16283350133805.gif",          timer:"10:33:34",          message:"想去就去吧，不要喝酒就是了",          type:2        },      ]    }  },

• template
  

<template>  <div</blockquote>