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