VUE中如何访问router prop

Question

我已经声明了一条路线，我想将一个道具传递给该路线以在我的索引组件中显示一个或另一个 header，但我无法以任何方式访问该道具...

  {
    path: '/tienda/:id',
    name: 'tienda',
    component: InicioSistema,
    props: { headersistema: true, }
  },

在我的 Header.vue

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

Answer 1

从v-if中删除this 。 Vue 在模板化时已经绑定this 。

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

Answer 2

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

为了测试添加以下内部脚本：

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