zoukankan      html  css  js  c++  java
  • Vue 路由按需keep-alive

    一个常见的场景:

    从 详情页 -->返回 列表页 的时候页面的状态是缓存,不用重新请求数据,提升用户体验。

    从 列表页 -->详情页 的时候请求数据

    也就是说,有的页面可以用缓存,不需要重新请求数据;有的页面需要重新请求数据,本篇记录这类需求;

    首先:keep-alive是 Vue提供的一个抽象组件,主要用于保留组件状态或避免重新渲染。

    但是 keep-alive会把其包裹的所有组件都缓存起来。

    实现:

    1.在App.vue写2个router-view出口

    //需要缓存的
    <keep-alive>   <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive>
    //不需要缓存的 <router-view v-if="!$route.meta.keepAlive"></router-view>

    2.在Router里定义好需要缓存的视图组件

    new Router({
        routes:[
            {
                path:'/',
                name:'index',
                component:()=import('./views/keep-alive/index.vue')
            },{
                path:'/list',
                name:'list',
                component:()=import('./views/keep-alive/list.vue'),
                meta:{
                    keepAlive:true
              }
            },{
                path:'/detail',
                name:'detail',
                component:()=import('./views/keep-alive/detail.vue'}
            }
        ]
    })            
  • 相关阅读:
    联赛前第五阶段总结
    陶陶摘苹果 —— 线段树维护单调栈
    联赛前第三阶段总结
    联赛前第四阶段总结
    [NOIP
    超级跳马 —— 矩阵快速幂优化DP
    我的博客园美化
    Wedding —— 2-SAT
    C++运算符优先级
    water——小根堆+BFS
  • 原文地址:https://www.cnblogs.com/susutong/p/11161934.html
Copyright © 2011-2022 走看看