Vue JS道具的功能不足

问题描述

我正在为VUE JS使用Gridsome框架

我正在使用this.$router.push(PATH,ParaMS)

导航到新页面

this.$router.push({path: `/${value.sectionLink}/`,params: {pageOBJ: value}})

页面路由工作正常-但是在页面中未定义PROP pageOBJ，如VUE检查器中所示：

它应该是object（这是VALUE设置的值），即

我尝试了多种不同的技术来解决此问题，但是还没有弄清楚，所以我想我在这里错过了什么？

当您将新的PAGE.VUE文件添加到/ pages文件夹时，gridsome自动生成页面路由-

这是问题吗？

Gridsome还引用了graphQI，您应该使用图而不是通过按动Props来获取数据吗？

任何帮助在这里都会很棒-如果您需要任何进一步的信息，请告诉我。

谢谢- W

基于当前答案的更新：

我已经向组件添加了props：true，如下所示，但是问题仍然存在。

代码片段-摘要：

用户单击SectionTitle组件，然后发出页面链接（每个SectionTitle都是一个来自Objects的sections数组的对象）

要查看当前的在线版本，请查看

wtwd.ninjashotgunbear.com

<template>
  <Layout>
    <div class="navs" v-for="section in sections" :key="section.sectionTitle">
      <!-- On click delay for screen to come ove top -->
      <!-- router to be put here -->
      <SectionTitle :data="section" @routeChange="reRoute($event)"/>
    </div>
    
    <PageTransition :dataObj="transitionObj"/>
    
  </Layout>
</template>

<script>

import SectionTitle from '@/components/SectionTitle.vue';
import PageTransition from '@/components/PageTransition.vue'

export default {
  MetaInfo: {
    title: 'Hello,world!'
  },components: {
    SectionTitle,PageTransition
  },data(){
    return {
      // data to be passed to the components

      sections: [
        {
          sectionTitle: 'Clients',sectionLink: 'clients',sectionSubTitle: '"Some of the amazing humans I have had the pleasure of working with"',backgroundColor: '#F08080',titleColor: '#E65454'
        },{
          sectionTitle: 'Projects',sectionLink: 'projects',sectionSubTitle: '"I LIKE TO MAKE PROJECTS THAT WILL TEST MY KNowEDGE AND EXPOSE MY WEAKnesSES"',backgroundColor: '#20B2AA',titleColor: '#11DACF'
        },{
          sectionTitle: 'Skills',sectionLink: 'skills',sectionSubTitle: `"LEARNING WILL NEVER END,SO LONG AS YOUR AMBITIONS ARE STOKED,AND I've got plenty of ambition"`,backgroundColor: '#A921B2',titleColor: '#CA14D6'
        },{
          sectionTitle: 'About Me',sectionLink: 'aboutme',sectionSubTitle: `"My joruney becoming a developer so far"`,backgroundColor: '#FFFFFF',titleColor: '#D1D1D1'
        },{
          sectionTitle: 'Contact Me',sectionLink: 'contactme',sectionSubTitle: `"If you have any questions or want to reach out about a project then i'd love to speak with you"`,backgroundColor: '#2185B2',titleColor: '#0076AB'
        }
      ],divText: null,transitionObj: null
  
  }

  },methods:{
    reRoute(value){
      
      // 1)A) - change the text of the div to say the section it is being moved to
      this.divText = value.sectionTitle
      this.transitionObj = value
    
     // FIND center pixcle value to place text - scrolled height + windowHeight / 2 = centerPos
      let centerPos = window.scrollY+(window.innerHeight/2)

      // Apply secific Title color - and center possitioning
      document.querySelector('.leaveScreen p').style.csstext=`color: ${value.titleColor}; top: ${centerPos}px`


      // 1) animate the loading screen
        let screen = document.querySelector('.leaveScreen');
        screen.style.csstext=`background: ${value.backgroundColor}; left: 0%`;

      // 2) re-route the page
      setTimeout(()=>{
        this.$router.push({path: `/${value.sectionLink}/`,params: {pageOBJ: value}}) // << says that the route name is not found
        // this.$router.push(value.sectionLink)
      },700)

    }
  }
}
  
</script>

<style lang="scss"> 
//  **** ERROR CAUSED BY NOT INSTALLING SCSS package ****
// https://gridsome.org/docs/assets-css/ &&&& npm install -D sass-loader node-sass

// Universal Font being used - LEMON MILK
@font-face {
  font-family: LemonMilk;
  src: url('../assets/fonts/LemonMilk.otf');
}

* {
  Box-sizing: border-Box;
}

.navs {
    font-family: LemonMilk;
}

.SectionTitle{
  cursor: pointer;
}

</style>

解决方法

在name中传递path而不是this.$router.push()

this.$router.push({name: ${value.sectionLink},params: {pageOBJ: value}})

您应将props:true添加到路由定义中：

{
 path:'/thepath/:theParam',component:SomeComponent,props:true
}

gridsome vue.js