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) => {})
    }
  }
})