vue -router параметры не определены в create () - PullRequest
Новая
       83

vue -router параметры не определены в create ()

1 голос
/ 30 мая 2020

Я беру параметр из моего vue -маршрутизатора и получаю эту ошибку при попытке сохранить данные параметров в данных моих компонентов 

Error in created hook: "TypeError: Cannot read property 'params' of undefined"

вот откуда я отправляю данные ('Home') компонент 

<template>
  <div class="container">

      <div v-for="art in articles" :key="art.title">
          <img alt="an image">
          <h4>{{art.title}}</h4>
          <button @click="shareData()"></button>
      </div>

  </div>
</template>

<script>
//const fb = require('../../fireconfig.js')

export default {
  name: 'Home',
  data:function() {
    return{
       articles: [
         {
           title: 'eee',
           body: 'oooo',
           img: 'dd'
        },
         {
           title: 'eesecone',
           body: 'secondddd',
           img: 'dwwd'
        }
      ]
    }
  },
  props: {
    post: Object
  },
  created(){
    console.log('db post will go here later')
    /*
    let ref = fb.db.collection('articles')
    ref.get()
  .then(snapshot => {
    if (snapshot.empty) {
      console.log('No matching documents.');
      return;
    }  
    snapshot.forEach(doc => {
      console.log(doc.id, '=>', doc.data());
      this.articles.push(doc.data())
    });
  })
  .catch(err => {
    console.log('Error getting documents', err);
  });
  */
  },
  methods:{
    shareData(){
      this.$router.push({name: 'Article', params: {data: this.articles} })
    }
  }
}
</script>

вот компонент, получающий данные и хранящий их ('Article'), они находятся в одном каталоге 

<template>
  <div class="container">
      <h3>THIS IS THE PAGE FOR A SINGLE ARTICLE</h3>
  <div v-for="art in articleData" :key="art.title">
      <img alt="an image">
          <h4>{{art.title}}</h4>
          <div>{{art.body}}</div>
</div>


  </div>
</template>

<script>
export default {
  name: 'Article',
    data:function(){
        return{
        articleData:[]
        }
},
    created(){
        this.articleData = this.$routes.params.data  //----------error happens here-------------
    }
}
</script>

вот мой маршрутизатор настройка в main. js:) 

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router';
import Article from './components/Article.vue'
import Home from './components/Home.vue'
import Search from './components/Search.vue'
Vue.use(VueRouter)
const routes = [
  {
    path: '/Article',
    name: 'Article',
    component: Article,
  },
  {
    path: '/',
    name: 'Home',
    component: Home,

  },
  {
    path: '/Search', component: Search,
    props: true
  }
];
const router = new VueRouter({
  routes
})

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

1 Ответ

0 голосов
/ 30 мая 2020

Вы добавляете s к $route, это должно быть: 

this.$route.params.data

это относится к текущему маршруту, а не ко всем маршрутам $ или маршрутизатору

...