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

拼搏现实的明天。 2023-07-25 09:46 25阅读 0赞

问题描述： 每个页面的title更改 路由： h5部分页面不需要数据缓存

import Vue from 'vue'
    import Router from 'vue-router'
    
    Vue.use(Router);
    
    
    
    
    export default new Router({
        routes: [
            {
                path: '/success',
                name: 'Success',
                component: myComponents.Success,
                beforeEnter: function (to, from, next) {
                    document.title = "21312312";
                    next();
                },
                meta: {
                    keepAlive: false, //此组件不需要被缓存
                }
            },
    
            {
                path: '*',
                redirect: '/home'
            }
        ]
    })

页面：

<template>
        <div id="app">
            
            
            
            <keep-alive>
                <router-view v-if="$route.meta.keepAlive">
                    
                </router-view>
            </keep-alive>
    
            <router-view v-if="!$route.meta.keepAlive">
                
            </router-view>
    
            
            
            
            
            
            
            
        </div>
    </template>

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

发表评论取消回复

表情：

评论列表（有 0 条评论，25人围观）

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

相关阅读

相关 h5页面计时器

h5页面计时器效果代码效果 ![在这里插入图片描述][70] 代码 <script> function countT

小鱼儿/ 2023年10月18日 09:22/ 0 赞/ 76 阅读

相关 vue使用keep-alive缓存页面数据

Keep-alive组件缓存 vue内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。提高性能。 1，语法： <keep-ali

谁践踏了优雅/ 2023年08月17日 16:25/ 0 赞/ 139 阅读

相关 vue h5 页面标题，页面数据缓存问题

问题描述：每个页面的title更改路由： h5部分页面不需要数据缓存 import Vue from 'vue' import Router fr

拼搏现实的明天。/ 2023年07月25日 09:46/ 0 赞/ 26 阅读

相关 Vue动态缓存页面

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

Bertha 。/ 2023年02月22日 03:50/ 0 赞/ 17 阅读

相关 VUE 页面缓存方法

操作步骤： 1、在router中设置需要缓存的页面：keepAlive: true 需要缓存 false 不需要缓存 isBack:false 需要刷新 t

落日映苍穹つ/ 2023年01月02日 12:30/ 0 赞/ 261 阅读

相关 VUE修改页面的标题

重点代码 meta:{ title:'首页'} 完整代码 import Vue from 'vue' import Router from

﹏ヽ暗。殇╰゛Y/ 2022年11月29日 03:20/ 0 赞/ 207 阅读

相关 H5 页面写法

1.引入阿里巴巴移动终端框架 flexable.js 2.引入 base.css 3. 使用rem 单位 base.css: html,body,div,

柔光的暖阳◎/ 2022年09月28日 11:37/ 0 赞/ 255 阅读

相关 h5页面测试

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

野性酷女/ 2022年06月16日 08:21/ 0 赞/ 319 阅读

相关 vue嵌入h5页面拍照获取照片旋转问题

在h5页面中经常会需要获取相册或者拍照上传照片，可以使用最简单的 <input type="file" name="photo" accept=".jpg,.png"

╰+哭是因爲堅強的太久メ/ 2022年01月10日 08:59/ 0 赞/ 680 阅读

相关 vue h5修改标题 title

1. 安装vue-wechat-title: npm install vue-wechat-title 2. 在mian.js 中引入： import vueWe

蔚落/ 2021年11月05日 15:52/ 0 赞/ 629 阅读