vue h5 页面标题,页面数据缓存问题

拼搏现实的明天。 2023-07-25 09:46 77阅读 0赞
  1. 问题描述: 每个页面的title更改 路由: h5部分页面不需要数据缓存
  2. import Vue from 'vue'
  3. import Router from 'vue-router'
  4. Vue.use(Router);
  5. export default new Router({
  6. routes: [
  7. {
  8. path: '/success',
  9. name: 'Success',
  10. component: myComponents.Success,
  11. beforeEnter: function (to, from, next) {
  12. document.title = "21312312";
  13. next();
  14. },
  15. meta: {
  16. keepAlive: false, //此组件不需要被缓存
  17. }
  18. },
  19. {
  20. path: '*',
  21. redirect: '/home'
  22. }
  23. ]
  24. })

页面:

  1. <template>
  2. <div id="app">
  3. <!-- <keep-alive>-->
  4. <!-- <router-view/>-->
  5. <!-- </keep-alive>-->
  6. <keep-alive>
  7. <router-view v-if="$route.meta.keepAlive">
  8. <!-- 这里是会被缓存的视图组件,比如 page1,page2 -->
  9. </router-view>
  10. </keep-alive>
  11. <router-view v-if="!$route.meta.keepAlive">
  12. <!-- 这里是不被缓存的视图组件,比如 page3 -->
  13. </router-view>
  14. <!--<keep-alive v-if="isWX">-->
  15. <!--<router-view/>-->
  16. <!--</keep-alive>-->
  17. <!--<div class="out-of-wx" v-else>-->
  18. <!--<img src="https://cdn.julanling.com/h5/saas_wx/wx-icon.png">-->
  19. <!--<div class="wx-tips">暂不支持当前使用环境<br/>请在微信中打开使用</div>-->
  20. <!--</div>-->
  21. </div>
  22. </template>

主要通过router的meta属性进行判断。记录一下

发表评论

表情:
评论列表 (有 0 条评论,77人围观)

还没有评论,来说两句吧...

相关阅读

    相关 Vue动态缓存页面

    原理通过keep-alive标签的include属性及vuex完成 需求说明:A页面到B页面需要缓存,A页面到C页面不需要缓存 所要缓存页面的顶级出口 <ke

    相关 h5页面测试

    1. 工具 : 草料二维码 当我们写了一个h5页面时,在谷歌浏览器上显示正常,这时我们想在手机上模拟,这时我们可以利用草料二维码. 1.百度草料二维码 打开官网,