vue项目微信端清理缓存问题解决
vue为单页面前端框架,清理缓存,常规的方式是添加html头部meta,如果逻辑里面是需要使用缓存的,这种方式不建议使用,代码片段如下:
<html manifest="IGNORE.manifest"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" /> ......
第二种方式就是在文件名后添加随机数,可以在路由里面进行设置,但如果路由是需要带参数的,会有影响;
const routes = [ { path: '/', redirect: '/userInfo'}, { path: '/home',component:home}, { path: '/login?123232', component: login, meta: {title: '登录'}}, { path: '/userInfo', component: userInfo, meta: { requiresAuth: true, title: '账号管理' }}, { path: '/toggleIdentity',component:toggleIdentity, meta: { requiresAuth: true, title: '身份切换' }}, { path: '/myTracks', component: myTracks, meta: { requiresAuth: true, title: '我的足迹' }}, // { path: '/applicationCenter', component: applicationCenter, meta: { requiresAuth: true, title: '应用中心'}}, { path: '/topicList', component: topicList, meta: { requiresAuth: true, title: '话题探讨' }}, { path: '/topicList/:id', component: topicDetail, meta: {title: '话题详情'}}, { path: '/activityList', component: activityList, meta: { requiresAuth: true, title: '精彩活动' }}, { path: '/interactionList', component: InteractionList, meta: { requiresAuth: true, title: '家校互动' }}, { path: '/officeMsg', component: OfficeMsg , meta: { requiresAuth: true, title: '办公短信' }}, { path: '/msgInfo/:messageId/:type/:smsMessageType/:keyTime', component: MsgInfo, meta: { requiresAuth: true, title: '详情' } }, { path: '/sendMessage', component: SendMessage , meta: { requiresAuth: true, title: '发消息' }}, { path: '/msgStatusReport/:messageId/:msgType/:keyTime', component: MsgStatusReport , meta: { requiresAuth: true, title: '状态报告' }}, { path: '/commentList',component:commentList}, { path: '/DPlayer/:id',component:DPlayer}, { path: '/application', component: Application , meta: { requiresAuth: true, title: '应用' }} ];
第三种就是在vue项目里面进行代码添加后缀,以随机数的形式,进入。原理上和第二种方式相似,url地址变化,就不会有上次的缓存了。
import store from './vuex/store' import cookie from './libs/cookie' // 路由预先判断 router.beforeEach((to, from, next) => { // 首先判断是否已有用户登录信息userInfo if (store.state.user.info) { next() } else { // 强制给index.html 加上时间戳 if (document.URL.indexOf('index.html?t=') < 0) { let timestamp = (new Date()).valueOf() window.location.href = '/index.html?t=' + timestamp + '#' + to.fullPath } let ua = window.navigator.userAgent.toLowerCase() // 判断微信客户端 if (ua.indexOf('micromessenger') > 1) { // 首先获取授权cookie authid let authid = cookie.get('authid') if (authid) { Vue.http.post('/index.php/weixin/Auth/auth', {authid: authid}).then((response) => { let res = response.data if (res.code === '04') { cookie.del('authid') window.location.href = '404.html' } else if (res.code === '01') { store.dispatch('setUserInfo', res.userInfo) next() } }, (response) => {}) } else { // 强制跳转,授权登录,并设置cookie window.location.href = '/index.php/weixin/Auth/redirect?redirect=' + encodeURIComponent(document.URL) } } else { // 非微信客户端 Vue.http.post('/index.php/weixin/Auth/auth', {openid: cookie.get('openid')}).then((response) => { let res = response.data if (res.code === '04') { cookie.del('authid') next() // window.location.href = '/index.php/weixin/Auth/redirect?redirect=' + encodeURIComponent(document.URL) } else if (res.code === '01') { store.dispatch('setUserInfo', res.userInfo) next() } }, (response) => {}) } } })