CODEWITHSUNDEEP
vue.js
user938e3ef455
user938e3ef455

Reputation: 349

Dynamically show components depending on the current route, vuejs

In vue how do I dynamically show components based on the current route?

I only want the custom-componentto be visible if not on the homepage. And by default, I set that the user is on the homepage so the component doesn't show on load.

I've tried several router methods with no luck: 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
  }
}
}

This is close, but doesn't achieve the desired results: VueJS - Load child components dynamically.

Also would this be the best way to do it in app.vue as I am trying now. Or should I have this logic in the custom-component instead?

Upvotes: 6

Views: 13722

Answers (4)

Serdar Sayın
Serdar Sayın

Reputation: 399

You can achieve your goal by using v-if or v-show directives

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

Or

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

If i were you i would watch the route object for further changes like this and use one of the option above according to this statement

Generally speaking, v-if has higher toggle costs while v-show has higher initial render costs. So prefer v-show if you need to toggle something very often, and prefer v-if if the condition is unlikely to change at runtime.

You can check out further details about conditional rendering from vue.js doc

Also would this be the best way to do it in app.vue as I am trying now.

No, you shouldn't bloat your app.vue file whilst you can handle the same problem with different components in more modular way.

Or should I have this logic in the custom-component instead?

In general if you can assume that this chunk of code can be used in different parts of the application, it's better to implement as different component.

Upvotes: 5

aarcoraci
aarcoraci

Reputation: 231

Why not using a computed property instead of a method ?

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

Upvotes: 8

Artem Shevchenko
Artem Shevchenko

Reputation: 53

The easiest option to show some component on the page is a method that return true or false. When we use v-if, component will be ignored during rendering.

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

Upvotes: 1

Bhaskar
Bhaskar

Reputation: 1938

Use the v-if binding in your component

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

where homePage is a bool value.

Upvotes: 0

Related Questions