Vue: keep-alive

keep-alive

keep-alive：可以实现页面缓存，比如从编辑页切出去再切进来，页面还是处于编辑状态。

1. 需要在router.js中设置meta属性，meta下的keepAlive属性设置为true，代表这个页面需要进行缓存。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import is from '@/view/is'
import list from '@/view/list'
import detail from '@/view/detail'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            name: 'HelloWorld',
            component: HelloWorld,
            meta: {
                keepAlive: false,
                title: 'HelloWorld'
            }
        },
        {
            path: '/is',
            name: 'is',
            component: is,
            meta: {
                keepAlive: false,
                title: 'is'
            }
        },
        {
            path: '/list',
            name: 'list',
            component: list,
            meta: {
                keepAlive: true,
                title: 'list'
            }
        },
        {
            path: '/detail',
            name: 'detail',
            component: detail,
            meta: {
                keepAlive: true,
                title: 'detail'
            }
        }
    ]
})

2. 在app.vue中修改一下代码<router-view />

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

<script>
export default {
    name: "App"
};
</script>

<style>
#app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
}
</style>

3. 在详情页detail.vue中，注意beforeRouteEnter和beforeRouteLeave两个方法。

<template>
    <div class="detail">
        <!-- form表单，用于测试是否缓存 -->
        <Form ref="formCustom" :model="formItem" :label-width="80">
            <FormItem label="Input">
                <Input v-model="formItem.input" placeholder="Enter something..."></Input>
            </FormItem>
            <FormItem label="Select">
                <Select v-model="formItem.select">
                    <Option value="beijing">New York</Option>
                    <Option value="shanghai">London</Option>
                    <Option value="shenzhen">Sydney</Option>
                </Select>
            </FormItem>
            <FormItem label="DatePicker">
                <Row>
                    <Col span="11">
                        <DatePicker type="date" placeholder="Select date" v-model="formItem.date"></DatePicker>
                    </Col>
                    <Col span="2" style="text-align: center">-</Col>
                    <Col span="11">
                        <TimePicker type="time" placeholder="Select time" v-model="formItem.time"></TimePicker>
                    </Col>
                </Row>
            </FormItem>
            <FormItem label="Radio">
                <RadioGroup v-model="formItem.radio">
                    <Radio label="male">Male</Radio>
                    <Radio label="female">Female</Radio>
                </RadioGroup>
            </FormItem>
            <FormItem label="Checkbox">
                <CheckboxGroup v-model="formItem.checkbox">
                    <Checkbox label="Eat"></Checkbox>
                    <Checkbox label="Sleep"></Checkbox>
                    <Checkbox label="Run"></Checkbox>
                    <Checkbox label="Movie"></Checkbox>
                </CheckboxGroup>
            </FormItem>
            <FormItem label="Switch">
                <i-switch v-model="formItem.switch" size="large">
                    <span slot="open">On</span>
                    <span slot="close">Off</span>
                </i-switch>
            </FormItem>
            <FormItem label="Slider">
                <Slider v-model="formItem.slider" range></Slider>
            </FormItem>
            <FormItem label="Text">
                <Input
                    v-model="formItem.textarea"
                    type="textarea"
                    :autosize="{minRows: 2,maxRows: 5}"
                    placeholder="Enter something..."
                ></Input>
            </FormItem>
            <FormItem>
                <Button type="primary">Submit</Button>
                <Button style="margin-left: 8px">Cancel</Button>
            </FormItem>
            <FormItem>
                <router-link :to="{name:'list'}">
                    <Button size="small" type="primary">跳转到列表页</Button>
                </router-link>
                <router-link :to="{name:'is'}">
                    <Button size="small" type="primary">跳转到is页</Button>
                </router-link>
            </FormItem>
        </Form>
    </div>
</template>

<script>
export default {
    name: "detail",
    mixins: [],
    components: {},
    filters: {},
    props: [],
    computed: {},
    data() {
        return {
            formItem: {
                input: "",
                select: "",
                radio: "male",
                checkbox: [],
                switch: true,
                date: "",
                time: "",
                slider: [20, 50],
                textarea: ""
            }
        };
    },
    watch: {},
    created() {
    },
    mounted() {
    },
    methods: {
        // 重置表单
        init() {
            this.$refs[formCustom].resetFields();
        }
    },
    // 路由进来之前，判断是从哪个页面过来的，设置不同的keepAlive属性
    beforeRouteEnter(to, from, next) {
        if (from.name === "list") {
            to.meta.keepAlive = true;
        } else {
            to.meta.keepAlive = false;
        }
        next();
        // beforeRouteEnter不能通过this访问组件实例，但是可以通过 vm 访问组件实例（刚开始错误写法）
        // next(vm => {
        //     if (from.name === "list") {
        //         // 在这里修改keepAlive值，是不能缓存数据的，因为在next()里面的代码，是在vue挂载之后执行，处于activated之后，此时activated中keepAlive还是false
        //         vm.$route.meta.keepAlive = true;
        //     } else {
        //         vm.$route.meta.keepAlive = false;
        //     }
        // });
    },
    // 路由离开之前，判断去往哪个页面，设置不同的keepAlive属性
    beforeRouteLeave(to, from, next) {
        if (to.name === "list") {
            this.$route.meta.keepAlive = true;
        } else {
            this.$route.meta.keepAlive = false;
        }
        next();
    },
    activated() {
        // 此方法在页面缓存时会被调用(this.$route.meta.keepAlive为true时)，根据路由元信息决定是否重新加载数据。不加载则是上次填写完的数据
        // console.log(this.$route.meta.keepAlive);
    }
};
</script>

<style scoped lang="less">
.detail {
    position: relative;
    height: 100%;
    width: 100%;
}
</style>