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

【问题标题】：Dynamically show components depending on the current route, vuejs根据当前路由动态显示组件，vuejs
【发布时间】：2019-05-24 08:59:30
【问题描述】：

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 中有这个逻辑吗？

【问题讨论】：

标签： vue.js

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

在页面上显示某些组件的最简单选项是返回 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>

【讨论】：

你可以简单地将hompage函数改写成这样：homePage() { return this.$route.path == "/" || this.$route.path == "/home" }

【解决方案3】：

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

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

或者

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

如果我是你，我会观察路由对象的进一步变化，例如 this，并根据此声明使用上述选项之一

一般来说，v-if 具有较高的切换成本，而 v-show 具有更高的初始渲染成本。所以如果你需要切换，更喜欢 v-show 经常发生的事情，如果条件不太可能发生，则更喜欢 v-if 在运行时更改。

你可以从 vue.js doc查看更多关于条件渲染的细节

这也是我正在尝试在 app.vue 中执行此操作的最佳方式现在。

不，你不应该让你的 app.vue 文件膨胀，但你可以处理同样的事情以更模块化的方式解决不同组件的问题。

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

一般来说，如果您可以假设这段代码可以在应用程序的不同部分使用，那么最好作为不同的组件来实现。

【讨论】：

【解决方案4】：

在您的组件中使用v-if 绑定

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

homePage 是一个布尔值。

【讨论】：

感谢您的回复。 v-if 可以正常工作。问题仍然是我无法让组件只显示在每个页面上，但主页上。路由器实例方法都没有帮助。