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

Question

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

custom-component如果不在主页上，我只希望它可见。默认情况下，我设置用户在主页上，因此组件在加载时不显示。

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

应用程序.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 - 动态加载子组件。

这app.vue也是我现在正在尝试的最佳方式吗？或者我应该有这个逻辑custom-component吗？

Answer 1

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

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

或者

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

如果我是你，我会看的路由对象，像进一步修改这个和使用选项之一。根据这一声明以上

一般来说，v-if 的切换成本较高，而 v-show 的初始渲染成本较高。因此，如果您需要经常切换某些内容，则首选 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

使用v-if组件中的绑定

<custom-component v-if="homePage" v-bind:is="homePage"></custom-component>

其中 homePage 是一个布尔值。