如何在VUE中访问路由器道具

Question

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

  {
    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

从this中删除v-if。模板化时，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')
           
        }
    },