Vue -- watch监听登陆页面隐藏头部和尾部

2022年05月10日 阅读数:6
这篇文章主要向大家介绍Vue -- watch监听登陆页面隐藏头部和尾部,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

兄弟首先确定要配路由,有login页面,接下来就是在home页面中设置一个变量flag=true 默认显示,接下来使用watch监听路由地址,当地址是login的时候,咱们把flag设置成flase。app

<template>
  <div>
    <app-header v-show="flag"></app-header>
    <router-view />
    <app-footer v-show="flag"></app-footer>
  </div>
</template>
<script>
import Header from '@/components/mian/Header'
import Footer from '@/components/mian/Footer'

export default {
    data() {
        return {
            flag:true
        }
    },
    components:{
        "app-header":Header,
        "app-footer":Footer
        
    },
    
    watch: {
        $route(to, from) {
            // to 和 from 都是 路由信息对象
            if(to.path=='/login'){
                this.flag = false
            }
            console.log();
        }
    }
}
</script>