本文介绍了一个使用Vue2.0、Vuex、vue-router和webpack等技术构建的仿微信聊天室项目。它实现了消息、表情、图片和视频功能，包括消息发送、表情预览和媒体文件预览。项目中还包含了登录注册功能，并通过vue-router进行页面路由管理，同时在路由层面进行了登录状态的拦截。
基于vue开发的仿微信聊天室vue-wechatRoom实例，vue版仿微信聊天界面|仿微信聊天对话框vue版，使用了vue2.0+vuex+vue-router+webpack+wcpop等技术开发，实现了消息、表情发送，图片、视频预览等功能。
import headerBar from './components/header'
import tabBar from './components/footer'
export default {
name: 'app',
data () {
return {
isTopFixed: true
}
},
components: {
headerBar,
tabBar
}
}
/* 引入公共样式 */
@import './assets/fonts/iconfont.css';
@import './assets/css/reset.css';
@import './assets/css/layout.css';
地址路由及登录、注册拦截
/*
* 页面地址路由js
*/
import Vue from 'vue'
import _router from 'vue-router'
import store from '../vuex'
Vue.use(_router) //应用路由
const router = new _router({
routes: [
// 登录、注册
{
path: '/login',
component: resolve => require(['../views/auth/login'], resolve),
},
{
path: '/register',
component: resolve => require(['../views/auth/register'], resolve),
},
// 首页、通讯录、我
{
path: '/',
component: resolve => require(['../views/index'], resolve),
meta: { showHeader: true, showTabBar: true, requireAuth: true }
},
{
path: '/contact',
component: resolve => require(['../views/contact'], resolve),
meta: { showHeader: true, showTabBar: true, requireAuth: true },
},
{
path: '/contact/uinfo',
component: resolve => require(['../views/contact/uinfo'], resolve),
},
{
path: '/ucenter',
component: resolve => require(['../views/ucenter'], resolve),
meta: { showHeader: true, showTabBar: true, requireAuth: true }
},
// 聊天页面
{
path: '/chat/group-chat',
component: resolve => require(['../views/chat/group-chat'], resolve),
meta: { requireAuth: true }
},
{
path: '/chat/single-chat',
component: resolve => require(['../views/chat/single-chat'], resolve),
meta: { requireAuth: true }
},
{
path: '/chat/group-info',
component: resolve => require(['../views/chat/group-info'], resolve),
meta: { requireAuth: true }
}
// ...
]
})
// 注册全局钩子拦截登录状态
const that = this
router.beforeEach((to, from, next) => {
const token = store.state.token
// 判断该路由地址是否需要登录权限
if(to.meta.requireAuth){
// 通过vuex state获取当前token是否存在
if(token){
next()
}else{
// console.log('还未登录授权！')
next()
wcPop({
content: '还未登录授权！', style: 'background:#e03b30;color:#fff;', time: 2,
end: function(){
next({ path: '/login' })
}
});
}
}else{
next()
}
})
export default router
扫一扫
456
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
