Vue JS 道具未定义

Question

我正在为 VUE JS 使用 Gridsome 框架

我正在使用 this.$router.push(PATH, PARAMS) 导航到新页面

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

页面路由工作正常 - 但是在 VUE 检查器中看到的页面中未定义 PROP pageOBJ：

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

我尝试了许多不同的技术来解决这个问题，但没有设法解决这个问题，所以我认为我在这里遗漏了一些东西？

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

这是问题吗？

Gridsome也引用了graphQI，你是不是应该使用graph而不是push Props来获取数据？

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

谢谢 - W

---

根据当前答案更新：

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

---

代码片段 - 摘要：

用户点击 SectionTitle 组件，然后发出页面链接 （每个 SectionTitle 都是来自 Object 的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>

Answer 1

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

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

Answer 2

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

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