<keep-alive>
    <router-view/>
</keep-alive>

页面,在这里已经定义了自定义指令，click-outside,既点击指令绑定元素的外部触发

<template>
<div >
outside
</div>
<div @click="handleClick" v-click-outside="handleClickOutside">
    <span v-if="show">page</span>
</div>
</template>
<script>
    export default {
        data() {
            return {
                 show: true,
            }
        },
        methods: {
            handleClickOutside(){
                this.show = false
            },
            handleClick() {
                this.show = true
            }
        }
    }
</script>

这里就有一个问题了，当元素绑定了click-outside 之后，那么只有等元素注销才会将这个指令注销掉。
但由于keep-alive 的原因，路由切换并不会注销这个route-view,所以只要你不点击绑定out-side元素时，那么一直会触发这个事件。
对性能影响不大（应该不大），在element-ui中的el-dropdown 也会一直触发这个事件。
在项目中我在out-side中一直console.log了一个字符串，不管页面怎么切换，只要有out-side指令的页面没有注销，那么不管你点击哪里都会触发这个事件。
一直console.log，这个就令人有点不舒服了。为了工作的舒适性，我搜索了这个问题，发现除了注销元素，就没有其他方法了。
无奈，就在keep-alive的生命周期函数中deactivated中通过杀出了这个绑定事件的元素，在activated中插入这个元素

<template>
<div >
outside
</div>
<div v-if="inThisPage" @click="handleClick"  v-click-outside="handleClickOutside">
    <span v-if="show">page</span>
</div>
</template>
<script>
    export default {
        data() {
            return {
                 show: true,
                 inThisPage: true
            }
        },
        methods: {
            handleClickOutside(){
                this.show = false
            },
            handleClick() {
                this.show = true
            }
        },
        deactivated() {
            this.inThisPage = false
        },
        activated() {
            this.inThisPage = true
        }
    }
</script>