TA的每日心情 | 开心 2021-12-13 21:45 |
---|
签到天数: 15 天 [LV.4]偶尔看看III
|
vue为单页面前端框架,清理缓存,常规的方式是添加HTML头部meta,如果逻辑里面是需要使用缓存的,这种方式不建议使用,代码片段如下:
- <html [b]manifest="IGNORE.manifest"[/b]>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
- [b]<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" />[/b]
- ......
复制代码
第二种方式就是在文件名后添加随机数,可以在路由里面进行设置,但如果路由是需要带参数的,会有影响
- const routes = [
- { path: "/", redirect: "/userInfo"},
- { path: "/home",component:home},
- { path: "/login[b]?123232[/b]", 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/[b]:messageId/:msgType/:keyTime[/b]", 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地址变化,就不会有上次的缓存了。参考地址https://blog.csdn.net/yelin042/article/details/79763061
- 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) => {})
- }
- }
- })
复制代码
|
|