Javascript Vuejs：基于路由有条件地渲染组件

某些组件需要为特定管线隐藏。我能够通过使用watcher实现从这个问题中发现的路线更改-。我不想在customizePage（route-/customize）中显示标题和侧边栏。但是，当我从那个特定页面进行硬重新加载时，会出现一个问题。这不会执行手表，因此它会失败。我找到的解决方案是在mounted（）中也安装了它，这样它在重新加载时也会执行

但在mounted和watcher中具有相同的功能看起来很奇怪。有更好的方法吗

<template>
    <div>
        <TrialBanner v-if="$store.state.website.is_trial"/>
        <div class="page-body-wrapper" :class="{ 'p-0' : isCustomizePage}">
            <Sidebar :key="$store.state.user.is_admin" v-if="!isCustomizePage"/>
            <div class="main-panel" :class="{ 'm-0 w-100' : isCustomizePage}">
                <Header v-if="!isCustomizePage"/>
                <div class="content-wrapper" :class="{ 'p-0' : isCustomizePage}">
                    <router-view :key="$store.state.websiteId"></router-view>
                </div>
            </div>
        </div>
    </div>
</template>


mounted() {
  if(this.$route.path == '/customize') {
     this.isCustomizePage = true;
  } else {
     this.isCustomizePage = false;
  }
},
watch: {
  $route (to, from){
     if(this.$route.path == '/customize') {
       this.isCustomizePage = true;
     } else {
       this.isCustomizePage = false;
     }
  }
}

安装的（）{
如果（此.$route.path=='/customize'）{
this.isCustomizePage=true；
}否则{
this.isCustomizePage=false；
}
},
观察：{
$route（到、从）{
如果（此.$route.path=='/customize'）{
this.isCustomizePage=true；
}否则{
this.isCustomizePage=false；
}
}
}

简易修复： 使用即时观察者

watch: {
  $route: {
     immediate: true,
     handler(to, from) {
         if(this.$route.path == '/customize') {
           this.isCustomizePage = true;
         } else {
            this.isCustomizePage = false;
         }
     }
  }
}

更复杂但更可扩展的修复程序： 使用“布局”组件

总体思路是创建“布局”组件，使用路由上的

meta

标记定义每个路由的布局，然后使用App.vue中的动态组件告诉应用程序要使用哪个布局

App.vue

<template>
  <div id="app">    
    <component :is="layout">
      <router-view></router-view>
    </component>
  </div>
</template>

<script>

export default {
  name: "App",
  computed: {
    layout() {
      return this.$route.meta.layout || 'default-layout';
    }
  }
};
</script>

Router.js：路由定义每个路由的布局

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView,    
  },
  {
    path: '/customize',
    name: 'customize',
    component: CustomizeView,
    meta: {
      layout: 'customize-layout'
    }
  }
];

---

每个布局组件中的

是视图渲染的位置。你也可以有多个，如果你想在每个版面上呈现不同的<代码>组件，请考虑使用VUE路由器钩子代替观察者：此外，如果您没有找到任何其他解决方案，那么将重复的代码分解为一个方法将更为简洁：）

<template>
    <div>
        <TrialBanner v-if="$store.state.website.is_trial"/>
        <div class="page-body-wrapper" class="p-0">
            <div class="main-panel" class="m-0 w-100">
                <div class="content-wrapper" class="p-0">
                    <slot></slot>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  name: 'CustomizeLayout',
};
</script>

import DefaultLayout from '@/layouts/DefaultLayout.vue';
import CustomizeLayout from '@/layouts/CustomizeLayout.vue';

Vue.component('default-layout', DefaultLayout);
Vue.component('customize-layout', CustomizeLayout);

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView,    
  },
  {
    path: '/customize',
    name: 'customize',
    component: CustomizeView,
    meta: {
      layout: 'customize-layout'
    }
  }
];