Java学习者论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

手机号码,快捷登录

恭喜Java学习者论坛(https://www.javaxxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,购买链接:点击进入购买VIP会员
JAVA高级面试进阶视频教程Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程

Go语言视频零基础入门到精通

Java架构师3期(课件+源码)

Java开发全终端实战租房项目视频教程

SpringBoot2.X入门到高级使用教程

大数据培训第六期全套视频教程

深度学习(CNN RNN GAN)算法原理

Java亿级流量电商系统视频教程

互联网架构师视频教程

年薪50万Spark2.0从入门到精通

年薪50万!人工智能学习路线教程

年薪50万!大数据从入门到精通学习路线年薪50万!机器学习入门到精通视频教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程 MySQL入门到精通教程
查看: 1758|回复: 0

[默认分类] vue项目微信端清理缓存问题解决

[复制链接]
  • TA的每日心情
    开心
    2021-12-13 21:45
  • 签到天数: 15 天

    [LV.4]偶尔看看III

    发表于 2020-8-10 13:32:58 | 显示全部楼层 |阅读模式
    vue为单页面前端框架,清理缓存,常规的方式是添加HTML头部meta,如果逻辑里面是需要使用缓存的,这种方式不建议使用,代码片段如下:

    1. <html [b]manifest="IGNORE.manifest"[/b]>
    2.   <head>
    3.     <meta charset="utf-8">
    4.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    5.     [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]
    6. ......
    复制代码


    第二种方式就是在文件名后添加随机数,可以在路由里面进行设置,但如果路由是需要带参数的,会有影响

    1. const routes = [
    2.   { path: "/", redirect: "/userInfo"},
    3.   { path: "/home",component:home},
    4.   { path: "/login[b]?123232[/b]", component: login, meta: {title: "登录"}},
    5.   { path: "/userInfo", component: userInfo, meta: { requiresAuth: true, title: "账号管理" }},
    6.   { path: "/toggleIdentity",component:toggleIdentity, meta: { requiresAuth: true, title: "身份切换" }},
    7.   { path: "/myTracks", component: myTracks, meta: { requiresAuth: true, title: "我的足迹" }},
    8.   // { path: "/applicationCenter", component: applicationCenter, meta: { requiresAuth: true, title: "应用中心"}},
    9.   { path: "/topicList", component: topicList, meta: { requiresAuth: true, title: "话题探讨" }},
    10.   { path: "/topicList/:id", component: topicDetail, meta: {title: "话题详情"}},
    11.   { path: "/activityList", component: activityList, meta: { requiresAuth: true, title: "精彩活动" }},
    12.   { path: "/interactionList", component: InteractionList, meta: { requiresAuth: true, title: "家校互动" }},
    13.   { path: "/officeMsg", component: OfficeMsg , meta: { requiresAuth: true, title: "办公短信" }},
    14.   { path: "/msgInfo/:messageId/:type/:smsMessageType/:keyTime", component: MsgInfo, meta: { requiresAuth: true, title: "详情" } },
    15.   { path: "/sendMessage", component: SendMessage , meta: { requiresAuth: true, title: "发消息" }},
    16.   { path: "/msgStatusReport/[b]:messageId/:msgType/:keyTime[/b]", component: MsgStatusReport , meta: { requiresAuth: true, title: "状态报告" }},
    17.   { path: "/commentList",component:commentList},
    18.   { path: "/DPlayer/:id",component:DPlayer},
    19.   { path: "/application", component: Application , meta: { requiresAuth: true, title: "应用" }}
    20. ];
    复制代码


    第三种就是在vue项目里面进行代码添加后缀,以随机数的形式,进入。原理上和第二种方式相似,url地址变化,就不会有上次的缓存了。参考地址https://blog.csdn.net/yelin042/article/details/79763061

    1. import store from "./vuex/store"
    2. import cookie from "./libs/cookie"
    3. // 路由预先判断
    4. router.beforeEach((to, from, next) => {
    5.   // 首先判断是否已有用户登录信息userInfo
    6.   if (store.state.user.info) {
    7.     next()
    8.   } else {
    9.     // 强制给index.html 加上时间戳
    10.     if (document.URL.indexOf("index.html?t=") < 0) {
    11.       let timestamp = (new Date()).valueOf()
    12.       window.location.href = "/index.html?t=" + timestamp + "#" + to.fullPath
    13.     }
    14.     let ua = window.navigator.userAgent.toLowerCase()
    15.     // 判断微信客户端
    16.     if (ua.indexOf("micromessenger") > 1) {
    17.       // 首先获取授权cookie authid
    18.       let authid = cookie.get("authid")
    19.       if (authid) {
    20.         Vue.http.post("/index.php/weixin/Auth/auth", {authid: authid}).then((response) => {
    21.           let res = response.data
    22.           if (res.code === "04") {
    23.             cookie.del("authid")
    24.             window.location.href = "404.html"
    25.           } else if (res.code === "01") {
    26.             store.dispatch("setUserInfo", res.userInfo)
    27.             next()
    28.           }
    29.         }, (response) => {})
    30.       } else {
    31.         // 强制跳转,授权登录,并设置cookie
    32.         window.location.href = "/index.php/weixin/Auth/redirect?redirect=" + encodeURIComponent(document.URL)
    33.       }
    34.     } else {
    35.       //  非微信客户端
    36.       Vue.http.post("/index.php/weixin/Auth/auth", {openid: cookie.get("openid")}).then((response) => {
    37.         let res = response.data
    38.         if (res.code === "04") {
    39.           cookie.del("authid")
    40.           next()
    41.           // window.location.href = "/index.php/weixin/Auth/redirect?redirect=" + encodeURIComponent(document.URL)
    42.         } else if (res.code === "01") {
    43.           store.dispatch("setUserInfo", res.userInfo)
    44.           next()
    45.         }
    46.       }, (response) => {})
    47.     }
    48.   }
    49. })
    复制代码


    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|Java学习者论坛 ( 声明:本站资料整理自互联网,用于Java学习者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-4-26 08:30 , Processed in 0.327893 second(s), 38 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表