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绑定

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

其中homePage是一个布尔值。

Answer 2

您可以使用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- 在运行时更改。

您可以从vue.js doc

中查看有关条件渲染的更多详细信息。

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

不，您不应该在处理相同文件的同时膨胀您的app.vue文件不同组件以更模块化的方式出现问题。

还是应该在自定义组件中使用此逻辑？

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

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>

Answer 4

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

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

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

4 个答案: