将布尔值从vue路由器传递到其组件

时间:2018-10-11 21:26:55

标签: javascript vue.js vue-router

我是Vuejs的新手。每当用户单击Homepage路由器链接时,我都会尝试触发过渡。我阅读了一些将道具传递给路线组件enter link description here的文档,但仍然无法使它起作用。我测试了过渡是否正常。但是似乎加载的布尔值没有正确传递给我的组件。

路由器index.js

   {
      path: '/',
      name: 'Home',
      component: Homepage,
      props: { loaded: true }
  },

首页组件:

<template>
 <transition name='fade'>
    <div  class="rgba-blue-grey-strong container" v-show="loaded">
     <p>Text with transition Every time user access Homepage component</p>
    </div>
 </transition>
</template>
<script>
export default {
     name: "Homepage",
     props:['loaded'],
     data(){
        return{
           loaded: false,
       }
     }
}

1 个答案:

答案 0 :(得分:1)

您在loadedprops对象中都定义了data。删除您的data对象中的一个即可。

<script>
export default {
  name: "Homepage",
  props:['loaded'],
  data(){
    return {
    }
  }
}
</script>