根据当前路由动态显示组件，vuejs

Question

在vue中，如何根据当前路由动态显示组件？

我只希望custom-component是可见的，如果不在主页上。默认情况下，我将用户设置为在主页上，这样组件就不会在加载时显示。

我尝试了几种路由器方法，但都没有成功：https://router.vuejs.org/api/#router-instance-methods。

app.vue：

<template>
  <div id="app" :class="$style.app">
    <navbar/>
    <custom-component v-bind:is="homePage"></custom-component>
    <router-view :class="$style.content"/>
    <footer/>
  </div>
</template>


  data() {
    return {
      homePage: true
    }
  },
 methods: {
     homePage() {
  if(this.$route.path("/") || this.$route.path("/home")) {
    this.homePage = true
  } else {
    this.homePage = false
  }
}
}

这很接近，但没有达到预期的结果：VueJS - Load child components dynamically。

这也是我现在正在尝试的在app.vue中做这件事的最好方法。或者我应该在custom-component中使用这个逻辑？

Answer 1

您可以使用v-if或v-show指令来实现您的目标

<custom-component v-show="homePage"></custom-component>

或

<custom-component v-if="homePage"></custom-component>

如果我是您，我会查看路由对象是否有进一步的更改，如this，并根据以下语句使用上面的选项之一

一般来说，v-if具有较高的切换成本，而v-

具有较高的初始渲染成本。因此，如果需要经常切换某些内容，请使用v-show；如果运行时条件不太可能发生变化，请使用v-if。

您可以从vue.js doc查看有关条件渲染的更多详细信息

正如我现在正在尝试的那样，

这也是在app.vue中做这件事的最好方法。

不，你不应该膨胀你的app.vue文件，而你可以用更模块化的方式用不同的组件来处理同样的问题。

或者我应该在自定义组件中使用这个逻辑吗？

通常，如果您可以假设此代码块可以在应用程序的不同部分中使用，则最好将其实现为不同的组件。

Answer 2

为什么不使用计算属性而不是方法呢？

export default {
    computed: {
      homePage() {
        if(this.$route.path == "/" || this.$route.path == "/home" ) {
          return true
        } else {
          return false
        }
      }
    }
  }

Answer 3

在页面上显示某些组件的最简单方法是返回true或false的方法。当我们使用v-if时，组件将在渲染过程中被忽略。

​

<template>
  <div id="app" :class="$style.app">
    <navbar/>
    <custom-component v-if="homePage()"></custom-component>
    <router-view :class="$style.content"/>
    <footer/>
  </div>
</template>
<script>
  export default {
    methods: {
      homePage() {
        if(this.$route.path == "/" || this.$route.path == "/home" ) {
          return true
        } else {
          return false
        }
      }
    }
  }
</script>

​