- 点击v-for出来的元素，跳转页面
- 给元素界说一个click点击事故，跳转页面用到动态路由
- tamplate
@click="toDetailPage(item)"
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>
//引入import ChatList from '@/components/ChatList.vue'//注册components: { ChatList },//利用<chat-list></chat-list>
template
<template> <div</blockquote>
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> <div</blockquote> |
