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

时间:2020-08-04 17:22:44

标签: javascript vue.js

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

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

2 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

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

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

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