vue仿QQ聊天室|vue聊天实例，直播聊天室

vue仿QQ聊天室|vue聊天实例，直播聊天室

​​图片压缩​​

​​百亿站点​​

技术栈： MVVM框架：Vue.js 2.0 状态管理：Vuex 页面路由：Vue-router 弹窗插件：wcPop 打包工具：webpack 2.0 环境配置：node.js + cnpm 图片插件：vue-photo-preview 效果截图： 主页面main.js引入 /*

主页面js*/

import Vue from 'vue'import App from './App.vue'// >>>引入jsimport $ from 'jquery'import fontsize from './assets/js/fontsize'// >>>引入弹窗插件import wcPop from './assets/js/wcPop/wcPop'import './assets/js/wcPop/skin/wcPop.css'// >>>引入饿了么移动端vue组件库import MintUI, { Loadmore } from 'mint-ui'import 'mint-ui/lib/style.css'Vue.component(Loadmore.name, Loadmore)Vue.use(MintUI)// >>>引入图片预览插件import photoPreview from 'vue-photo-preview'import 'vue-photo-preview/dist/skin.css'Vue.use(photoPreview, { loop: false, fullscreenEl: false, //是否全屏 arrowEl: false, //左右按钮})// >>>引入地址路由import router from './router'import store from './vuex'复制代码vue-router页面地址路由及登录拦截：/* * 页面地址路由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 = thisrouter.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

主页面模板app.vue

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。