路由缓存 keep-alive

1.App.vue 中写

<template>

    <div id="app">

        <keep-alive>

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

            </router-view>

        </keep-alive>

        <router-view

            v-if="!$route.meta.keepAlive"

            class="router-view"

        ></router-view>

    </div>

</template>

2. 在router中写  

{

        path: '/formal',

        name: 'Formal',

        component: () =>

            import(

                /* webpackChunkName: 'authentication' */ '../views/authentication/formal.vue'

            ),

        meta: {                             //通过该值判断页面是否缓存

            keepAlive: true,    

            isBack: false

        }

    },

3.  在对应的页面中监听路由 判断页面是从哪一个页面跳转至该页面  （以下watch为ts写法）

 @Watch('$route')

    onChangeValue(to: any, from: any) {

        if (from.path === '/upload') {

            this.$route.meta.isBack = true;

            this.routerState = true;    //后面通过判断该值决定是否清空内容

        } else {

            this.$route.meta.isBack = false;

            this.routerState = false;

        }

    }