<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>