精华内容
下载资源
问答
  • 这个功能通过keep-alive组件实现,keep-alive组件可以使被包含的组件保留状态,或避免重新渲染。  在routes.js中定义路由,在路由中定义元信息(meta字段),需要缓存的页面就需要在meta对象中定义一个字段,这里设置...
  • 其实到现在,对于vue还是没有玩通,每深挖一次,就会发现一次vue的精彩,开始不清楚要用什么实现缓存,找了好久,有好几种说法,就是用vuex、vuet或者keep-alive,然后对比了一下,在我认为,vuex和vuet是实现状态...
  • 当引入keep-alive的时候,页面第一次进入,钩子的触发顺序created-> mounted-> activated,退出时触发deactivated。 当再次进入(前进或者后退)时,只触发activated。 *********************************** 这就...
  • 问题产生的背景 我们一个后台,在切换一些标签页的时候,是使用的 keep-alive 缓存的标签页,也使用了 include 属性来决定哪个...这个项目是基于一个开源 vue 后台框架:https://github.com/PanJiaChen/vue-element-ad
  • 当使用vue-router开发Vue.js的SPA项目时, <keep>总是用于缓存已路由的页面,有三个选项来管理其中的缓存树, include - Only components with matching names will be cached. exclude - Any component with a ...
  • 最近在做项目发现一个问题,当我使用了 keep-alive 标签后,进入了某个路由进行一系列操作,再点击浏览器后退,再次进入刚才的路由,页面被操作的数据没有初始化! 分析问题 这是因为 keep-alive 将路由页面缓存,...
  • 主要介绍了Vue中 key keep-alive的实现原理,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 业务需求: 切换tab页标签的时候(路由前进的时候),缓存当前组件数据,关闭tab页标签的时候清除组件缓存。 实现: 1、先在store的state里面设置一个要缓存数组 2、在进到子页面的时候,更新...以上这篇vue keep-aliv
  • 主要为大家详细介绍了Vuekeep-alive组件的作用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了vuekeep-alive,include的缓存问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue-stack-router-demo 此Demo为应用 库的前端路由项目。 运行后查看vue dev-tool中即可观察到缓存中的Vue实例,安装。 演示视频地址 Project setup yarn install Compiles and hot-reloads for development yarn ...
  • 问题是这样的,我使用webpack的npm run dev运行的时候,keep-alive路由缓存是有效的,但是我npm run build,把文件放到实际的项目中去的时候,会有如下的问题: 路由如下: var menus = [ { path: '/user', name...
  • <keep>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。 首先在App.vue页面上有下面一段代码,我们都知道这是页面渲染的地方 <router></router> 把这段代码改成如下: <keep> ...
  • 主要介绍了vue使用keep-alive保持滚动条位置的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 简单给大家介绍了Vue项目中使用keep-Alive步骤,在vue2.1.0之前,实现方式也给大家作了简单介绍,感兴趣的朋友跟随脚本之家小编一起看看吧
  • 今天小编就为大家分享一篇基于vuekeep-alive缓存问题的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vuekeep-alive用法技巧

    2020-10-16 13:56:26
    在本篇文章里小编给大家整理的是关于vuekeep-alive用法技巧以及实例代码,需要的朋友们学习下。
  • 主要介绍了Vuekeep-alive 实现后退不刷新并保持滚动位置的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要介绍了详解Vue路由开启keep-alive时的注意点,非常具有实用价值,有兴趣的朋友可以了解一下
  • Vuekeep-alive的使用我总结的有两种方式应用: 首先简述一下keep-alive的作用,kee-alive可以缓存不活动的的组件。当组件之间进行相互切换的时候,默认会销毁,当重新切换回来时又重新初始化。现在有需求切换回来...
  • 在搭建 vue 项目时,有某些组件没必要多次渲染,所以需要将组件在内存中进行‘持久化’,此时 <keep> 便可以派上用场了。 <keep> 可以使被包含的组件状态维持不变,即便是组件切换了,其内的状态依旧维持在内存之中...
  • 目前keep-alive可以有效缓存一级,二级的路由菜单,3级以上菜单并不能做到缓存,这里提供一个解决方案: 在cachedViews中手动加上一级菜单和三级菜单之间,缺失的二级菜单的名字,这样二级菜单下的组件就会缓存了 ...
  • 尤其是h5制作的app,来回跳转的时候,有的地方需要做缓存,一来防止页面重复加载同样的数据造成服务器压力,二来防止页面重新加载造成卡顿,影响客户体验,今天,小闫就工作问题来帮助大家理解vue-router的缓存 ...

    以Vue提供了一个内置组件keep-alive来缓存组件内部状态,避免重新渲染。(在开发Vue项目的时候,有一部分部分组件是没必要多次渲染的)

    在vue项目中,尤其是h5制作的app,来回跳转的时候,有的地方需要做缓存,一来防止页面重复加载同样的数据造成服务器压力,二来防止页面重新加载造成卡顿,影响客户体验,今天,小编就工作问题来帮助大家理解vue-router的缓存 - keep-alive

    一、 <router-view>

    • <router-view> 组件用于渲染路径匹配到的视图组件。 渲染的组件还可以内嵌自己的 ,根据嵌套路径,渲染嵌套组件。
    • <router-view> 组件有一个name属性,默认为default,渲染对应的路由配置中 components 下的相应组件。
    //视图容器
    <router-view class="view one"></router-view>
    <router-view class="view two" name="a"></router-view>
    <router-view class="view three" name="b"></router-view>
    
    //路由配置
    {
     path: '/main',
     components: Foo
    },{
     path: '/',
     components: {
       default: Foo,
       a: Bar,
       b: Baz
     }
    }
    
    • 因为它也是个组件,所以可以配合 和 使用。如果两个结合一起用,要确保在内层使用 <keep-alive>
    <transition>
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </transition>
    

    二、路由的router和route

    vue-router中经常会操作的两个对象route和router
    route

    $route对象

    $route对象指的是当前路由对象,包含了当前 URL 解析得到的信息。包含当前的路径,参数,query对象等。

    **1.$route.path**
          字符串,对应当前路由的路径,总是解析为绝对路径,如 "/foo/bar"**2.$route.params**
          一个 key/value 对象,包含了 动态片段 和 全匹配片段,
          如果没有路由参数,就是一个空对象。
    **3.$route.query**
          一个 key/value 对象,表示 URL 查询参数。
          例如,对于路径 /foo?user=1,则有 $route.query.user == 1,
          如果没有查询参数,则是个空对象。
    **4.$route.hash**
          当前路由的 hash 值 (不带 #) ,如果没有 hash 值,则为空字符串。锚点
    **5.$route.fullPath**
          完成解析后的 URL,包含查询参数和 hash 的完整路径。
    **6.$route.matched**
          数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
    **7.$route.name    当前路径名字**
    **8.$route.meta  路由元信息
    

    $route对象

    $router对象是全局路由的实例,是router构造方法的实例。主要是实现路由跳转使用。

    //常用方法
    this.$router.push('home');
    this.$router.go(-1);
    this.$router.replace('/')
    ......
    

    三、keep-alive 实例–重点来了!!!

    首先,在根vue文件中添加视图入口,在这里注意 和 的位置,以及判断当前路由是否设置了要做缓存

    //app.vue
    <transition :name="transitionName">
     <keep-alive>
      <router-view v-if="$route.meta.isKeepAlive"  class="router-view"></router-view>
     </keep-alive>
    </transition>
    
    <transition :name="transitionName">
     <router-view v-if="!$route.meta.isKeepAlive" class="router-view"></router-view>
    </transition>
    

    在route的meta属性中加一个属性isKeepAlive

    // router/index.js
    export default new VueRouter({
     saveScrollPosition: true,
     routes: [
         {path: '/', redirect: '/main'},
         {
             path: '/main', 
             name: 'MainIndex', 
             component: MainIndex,
             meta:{
                 isKeepAlive: true
             }
         },
     ]
    })
    

    在有缓存的路由中处理数据

    //MainIndex.vue
    beforeRouteEnter(to,from ,next){
    	//在这里访问不到this
      next(vm => {
          // 通过 `vm` 访问组件实例
          vm.cerateInterval();
      })
    },
    beforeRouteLeave(to,from ,next){
      clearInterval(this.timer);
      clearInterval(this.secondTimer);
      next();
    }
    

    四、keep-alive 新方式include

    近期小编又get到了一种新方式,完美的解决了缓存和不需要缓存的路由翻页跳转混乱的问题

    <transition :name="transitionName">
     <keep-alive include="MainIndex">
       <router-view class="router-view"></router-view>
     </keep-alive>
    </transition>
    
    export default {
       name: "MainIndex",
       data(){},
       methods:{}
    }
    
    • include写法:
    <keep-alive :include="News,HelloWorld">
    <keep-alive :include="['News','HelloWorld']">
    <keep-alive :include="/News|HelloWorld/">
    
    
    <keep-alive :include="aliveComponent">
    export default {
      name: 'App',
      data(){
        return{
          aliveComponent: ['News','HelloWorld']
        }
      }
    }
    

    include的值是 router-view需要缓存的路由 的name
    这里会有个问题,这个缓存的路由,必须是keep-alive下的直接路由,如果是个子路由,则需要在加载子路由的地方再加个keep-alive,(两个地方都要加keep-alive,在app.vue中不加的话,到缓存路由的父路由会刷新加载,子组件相当于也刷新了,父路由再加keep-alive,也只能在父路由内缓存不刷新,出了父路由)

    • App.vue入口vue文件,设置路由缓存
      在这里插入图片描述

    • 路由,显示,缓存的是router-view下路由的子组件,子路由
      在这里插入图片描述

    • router-view包含的的路由
      在这里插入图片描述

    • router-view包含的的路由的子路由,即需要缓存的路由页面
      在这里插入图片描述
      到此,就实现了某些路由页面的缓存~

    加缓存后,数据要更新,还是需要在钩子函数中执行,这就用到了activated,deactivated等钩子函数,详细讲解请看。。。。

    展开全文
  • Document 显示组件一 ... }, 如图所示 效果 keep-alive会缓存当前组件而不是销毁它们,他自身不会渲染成dom元素,所以log的销毁钩子函数不起作用 完 A lot can happen between now and never. 把握当下,一切皆有可能。
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <div id="app">
    
            <button @click="com = 'com1'">显示组件一</button>
            <button @click="com = 'com2'">显示组件二</button>
    
            <!-- is属性绑定的时当前需要使用的组件 -->
            <keep-alive>
                <component :is="com"></component>
            </keep-alive>
            <!--keep-alive会缓存当前组件而不是销毁它们,他自身不会渲染成dom元素,适用场景不需要变动的两个组件只是切换频繁,节省性能  -->
        </div>
        <script src="./js/vue.js"></script>
        <script>
            // 组件 1
            const com1 = {
                    template: `
                    <div>这是组件一的内容</div>
                `,
                    created() {
                        console.log('组件一创建了');
                    },
                    activated() {
                        console.log('组件一激活了')
                    },
                    deactivated() {
                        console.log('组件一失活了')
                    },
                    beforeDestroy() {
                        console.log('组件一销毁之前')
                    },
                    destroyed() {
                        console.log('组件一销毁之后')
                    },
                }
                // 组件 2
            const com2 = {
                template: `
                    <div>这是组件二的内容</div>
                `,
                created() {
                    console.log('组件二创建了');
                },
                activated() {
                    console.log('组件二激活了')
                },
                deactivated() {
                    console.log('组件二失活了')
                },
                beforeDestroy() {
                    console.log('组件二销毁之前')
                },
                destroyed() {
                    console.log('组件二销毁之后')
                },
            }
            new Vue({
                components: {
                    com1,
                    com2
                },
                data: {
                    // 1 默认显示 com1组件
                    com: 'com1'
                },
    
            }).$mount('#app')
        </script>
    </body>
    
    </html>

    项目动态组件

    上面我写在一个html中 没用cli,下面我再用项目创建一个动态组件

    第一:新建两个子组件如下图 

     第二 :在父组件引入 注册 使用 ,在data定义默认显示的组件 例如 com, 在动态组件上写 :is="com"

     

    
        <keep-alive>
          <component :is="com"></component>
        </keep-alive>
      </div>
    
    
      data() {
        return {
          com: "com",
        };
      },

    如图所示

    效果

      keep-alive会缓存当前组件而不是销毁它们,他自身不会渲染成dom元素,所以log的销毁钩子函数不起作用

    A lot can happen between now and never.
    把握当下,一切皆有可能。

    展开全文
  • 主要介绍了vuex + keep-alive实现tab标签页面缓存功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 使用 vuekeep-alive 的 include 属性给组件做动态缓存,从详情页返回不变,从其他页面进入列表页则刷新 加需要缓存的列表页面定义一个数据集在 vuex state:{ pageListArr:[] } 列表页的 name 为 proList ,详情页...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,330
精华内容 7,332
关键字:

keep-alivevue

vue 订阅