路由懒加载，数据缓存，路由动效，路由激活

路由懒加载，数据缓存，路由动效，路由激活

路由懒加载

1. 概念： 指的是，对应的路由加载对应的路由组件—按需加载路由，点那个加载那个
2. Vue异步组件
3. webpack的代码分割

const routerLaayLoad = ( comName ) => {//这里返回的是一个函数
    return () => {//如若你一个函数
        import (/* webpackChunkName: "view-[request]" */ `../components/pages/${view}.vue`)
    }//这里的注释是注释语法，表示webpack的代码分割
}
const routes = [
    {
        path: '/',
        redirect: '/home'
    },
    {
        path: '/home',
        component: () => {
        },
        children: [
            {
                path: 'food',
                components: {
                second: routerLayLoad('home/Food')//这里的路径是因为components里面还有一个home文件夹
            },
             name: 'food'
            }
        ]
    },
    {
        path: '/category',
        component: routerLayLoad('Category'),//将组件传入你创建的这个函数中
    },
    {
        path: '/list/:id',
        component: routerLayLoad('List'),
        name: 'list'
    },
    {
        path: '/login',
        component: routerLayLoad('Login')
    },
    {
        path: '/reg',
        component: routerLayLoad('Reg')
    },
    {
        path: '/mine',
        component: routerLayLoad('Mine')
    },
    {
        path: '/error',
        component: routerLayLoad('Error')
    },
    {
        path: '**',
        redirect: '/error'
    }
]

路由激活

• A: 自己书写一个类名或是使用第三方给的类名
• B；在router-link组件身上添加一个 active-class 的属性

<router-link to = "/home" active-class = "active"/>

路由缓存

• 在router-link组件上添加一个属性 keep-alive，这样会将第一次加载的数据存在本地中，当第二次加载时直接从本地存存储中获取数据，就不用重新加载，浪费内存了

<router-link to = "/home" keep-alive></router-link>

路由的动画

• A：先安装 animate.css 可以模块化引入 yarn add animate.css
• B: 在main.js中引入 加上这一句就可以了，impore要写再最上面import 'animate.css'
• C：将router-view 组件用transition组件包裹
• D: 在transition组件身上添加 enter-active-class 和 leave-active-class

<transition
enter-active-class="animated slideInLeft"
leave-active-class="animated slideOutLeft"
mode="out-in"
name = "router"
>
<router-view></router-view>
</transition>