Динамическое отображение компонентов в соответствии с маршрутом Vue. JS (v-show работает, а v-if - нет) - PullRequest
Новая
       29

Динамическое отображение компонентов в соответствии с маршрутом Vue. JS (v-show работает, а v-if - нет)

1 голос
/ 05 марта 2020

Так что мне нужно условно визуализировать верхний и нижний колонтитулы на основе маршрута верхнего уровня. Следующий код работает с v-show в компонентах statHeader и footerApp, но это не то, что мне нужно, поскольку v-show скрывает только компоненты, использующие CSS. v-if фактически удаляет его из DOM, но он работает только один раз. Он не обновляется при изменении маршрута. От ДОМА до ADMIN: v-if скрывает верхний и нижний колонтитулы, но возвращается в ДОМОЙ: верхний и нижний колонтитулы все еще остаются скрытыми и не обновляются.

Новичок в Vue, помогите и поймите понимание этой концепции будет очень признателен. Спасибо. 

<template>
  <div id="app">
    <!-- header -->
    <statHeader v-show="checkComponent"/>
    <!-- header -->
    <!-- main content -->
    <div id="content-scroll">
      <router-view/>
    <!-- footer -->
    <footerApp v-show="checkComponent"/>
    <!-- footer -->
    </div>
    <!-- main content -->
  </div>
</template>

<script>
import footerApp from '@/components/Footer.vue'
import statHeader from '@/components/Header.vue'

export default {
  name:"App",
  data(){
    return{
      viewsList:['admin',],
    }
  },
  components:{
    statHeader,footerApp,
  },
  computed:{
    checkComponent(){
      if(this.$route.matched.some(({ name }) => this.viewsList.includes(name))){
        return false;
      }
      else{
        return true;
      }
    },      
  },
}
</script>
...