javascript - 将 bool 值从 vue 路由器传递到其组件

标签 javascript vue.js vue-router

我是 Vuejs 的新手。每次用户单击主页路由器链接时,我都会尝试触发转换。我阅读了一些将 Prop 传递给路由组件的文档 enter link description here ,但仍然无法正常工作。我测试了过渡是否有效。但似乎加载的 bool 值没有正确传递到我的组件。

路由器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,
       }
     }
}

最佳答案

您在 propsdata 对象中定义了 loaded。删除 data 对象中的那个,就没问题了。

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

关于javascript - 将 bool 值从 vue 路由器传递到其组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52769181/

相关文章:

javascript - 如何在 IE 中的文档上触发 "onload"事件

javascript - 通过变量值检查复选框的正确方法是什么?

javascript - 如何通过单击选择元素的选项项来触发操作(Vue.js)?

javascript - 在Vue router中,为什么会出现这种情况呢? this$1.pending !== 路线

javascript - 将外部 javascript 库导入 Typescript 以与 Node 一起使用

javascript - 具有可变属性的目标 JSON 对象

javascript - 如何在 laravel 中使用 Vue.js 发送表单?

twitter-bootstrap - 在 Vue 中,v-绑定(bind)不适用于 Bootstrap Toggle Checkboxes 的 "checked"属性?

javascript - 如何将以下代码转换为 vue js 代码?

javascript - 将 json 数据从一个组件传递到另一组件。 Vue.js