keep alive和name的关系与路由懒加载的应用

keep alive

1.当项目使用keep-alive时，可搭配组件name进行缓存过滤

created()：在创建vue对象时，当html渲染之前触发；但是注意，全局vue.js不强制刷新或者重启时只创建一次，也就是说，created()只会触发一次；

activated()：在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据、keepalive缓存组件后，可执行方法；

deactivated()：离开组件时执行；

注意：activated()和deactivated()只有在<keep-alive></keep-alive>包裹的时候才有效；

2.DOM做递归组件时

 比如说detail.vue组件里有个list.vue子组件，递归迭代时需要调用自身name

list.vue:

               

3.当你用vue-tools时

vue-devtools调试工具里显示的组见名称是由vue中组件name决定的

概念
    keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。

作用
    在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性 起到缓存的作用

用法 在app.vue文件中 判断缓存的页面

<router-link to="/"></router-link>

        <keep-alive>

            <router-view v-if="$route.meta.keepAlive"></router-view>

        </keep-alive>

        <router-view v-if="!$route.meta.keepAlive"></router-view>

然后在路由Index.js中 多加了一个判断

{

        path: "/",

        name: "",

        component: search,

        meta: {

            keepAlive: false // 哪个页面用到的话就把他变成true

        },

vue项目实现路由按需加载(路由懒加载)的3种方式

两种方式

1 . vue异步组件技术 ==== 异步加载 

2.组件懒加载方案二 路由懒加载(使用import)

这个是最好用，也是经常写vuepc端的标配

const 组件名=() => import('组件路径'); 如下是万孚生物的例子，如何合并的方法，更好的管理

// 合并模块路由

const modulesRoutes = [...circle, ...show, ...personal, ...wind]

    //懒加载

const MainPage = () =>

    import ('@/home.vue');

// 首页

const Home = () =>

    import ('@/views/home/index.vue');

const routes = [{

        path: "/",

        name: "MainPage",

        component: MainPage,

        meta: {

            keepAlive: false

        },

        redirect: '/home',

        children: [{

                path: "/home",

                name: "home",

                component: Home,

                meta: {

                    keepAlive: false

                },

            },

            ...modulesRoutes

        ]

    },