Unlock the secrets of accessing the router prop in VUE

Question

I have set up a route where I am passing a prop to display different headers in my index component, but I'm struggling to access the prop properly...

  {
    path: '/store/:id',
    name: 'store',
    component: SystemStart,
    props: { systemHeader: true, }
  },

Within my Header.vue file

    <div v-if="this.$route.props.systemHeader">
Displaying one header...
    </div>
    <div v-else>
Showing alternative header..
    </div>

Answer 1

Answer №1

Make sure to exclude the use of this inside v-if. Vue will automatically handle binding for you in the template.

<template>
    <div v-if="$route.props.headersistema">A header...</div>
    <div v-else>Show Other header..</div>
</template>

Answer 2

Make sure to exclude the use of this inside v-if. Vue will automatically handle binding for you in the template.

<template>
    <div v-if="$route.props.headersistema">A header...</div>
    <div v-else>Show Other header..</div>
</template>

Answer 3

<script>
    export default {
        props: ['headerstyle'],
    };
</script>

To conduct a test, include the following code within the script section:

 mounted() {
        if (this.headerstyle){
            console.log(this.headerstyle, 'headerstyle')
           
        }
    },

Answer 4

<script>
    export default {
        props: ['headerstyle'],
    };
</script>

To conduct a test, include the following code within the script section:

 mounted() {
        if (this.headerstyle){
            console.log(this.headerstyle, 'headerstyle')
           
        }
    },