Передача данных JSON с одной страницы VUE на другую страницу VUE и визуализация диаграммы

Question

Я просматриваю данные json внутри таблицы в vue и передаю некоторые из них на другую страницу, используя ссылку маршрутизатора.

 Projects.vue

         <tbody class>
          <tr v-for="project in projects" aria-rowindex="1" class>
            <td aria-colindex="1" class>{{project.name}}</td>
            <td aria-colindex="2" class>{{project.date}}</td>
            <td aria-colindex="3" style="width: 100px">
          <router-link to={name: 'Performance', params: {{project.Line_base}} }> 
                <i class="fa fa-eye"></i>
              </router-link>&nbsp;
              <i class="fa fa-edit"></i>
              &nbsp;
              <i class="fa fa-remove icons" style="color: red"></i>
              &nbsp;
              <i class="fa fa-share-alt"></i>
            </td>
          <!-- <td aria-colindex="4" class>{{project.short_description}}</td> -->
          </tr>

import axios from 'axios';
import Performance from "./Performance";

export default {
 components: {
  Performance
      },
  name: "builder-basic",
   data() {
    return {
       projects: []
     };
   },
   mounted () {
    axios
       .get('http://some.api.net/v1/projects/')
       .then(response => (this. projects = response.data.entities))
   },
 };
 </script>

Этот проект. Line_base представляет собой массив целых чисел, которые я хочу передать

  Performance.vue 

   <template>
   <div class="animated fadeIn">
     <b-card header-tag="header" footer-tag="footer">
      <div slot="header">Performance - Models vs Baseline</div>
       <div class="card-body" >
        <div class="chart-wrapper" >
          <b-card header="Lift Chart" >
            <div class="chart-wrapper">
              <line-example  chartId="chart-line-01"   :styles="chartStyle"  />
             </div>
           </b-card>
        </div>
        </div>
         <div class="card-body" >
            <div class="chart-wrapper">
             <b-card header="Accuracy & Sensitivity" >
              <bar-example  chartId="chart-bar-01"   :styles="chartStyle"  />
            </b-card>
         </div>
        </div>   
     </b-card>

   </div>
 </template>

 <script>
 import axios from "axios";
 import LineExample from "./charts/LineExample";
 import BarExample from "./charts/BarExample";

export default {
  name: 'Performance',
  components: {
  LineExample,
   BarExample
  },
  computed: {
    chartStyle () {
      return {
        height: '500px',
        position: 'relative'
      }
    }
    }

    }
  };

 </script>

У меня есть index.js, в котором я упомянул маршрутизаторы, которые работают хорошо, если я не передаю какие-либо данные производительности, откуда я буду генерировать график с использованием диаграмм.

 index.js
  let router = new Router({
  mode: 'hash', // https://router.vuejs.org/api/#mode
  linkActiveClass: 'open active',
   scrollBehavior: () => ({ y: 0 }),
   routes: [
    {
     path: '/',
      redirect: '/dashboard',
      name: 'Home',
     component: DefaultContainer,
      children: [
        {
      path: 'Performance',
      name: 'Performance',
      component: Performance
    }])

Данные не передаются, я следовал за некоторыми из статей, которые уже обсуждались по переполнению стека

Answer 1

Отправьте параметры следующим образом:

<router-link :to="{name: 'Performance', params: { Line_base: project.Line_base }}">
  <i class="fa fa-eye"></i>
</router-link>

В вашем Performance.vue компоненте вы должны получить параметры de params с маршрута следующим образом.

computed: {
  lineBase () {
    return this.$route.params.Line_base
  }
}

Answer 2

Кажется, вы делаете синтаксическую ошибку.Этот пример из маршрутизатора vue docs :

<!-- named route -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

Далее в документации он указывает свойства ссылки на маршрутизатор, указав:

route.params

тип: Объект

Объект, содержащий пары ключ / значение динамических сегментов и сегментов звезды.Если нет параметров, значение будет пустым объектом.

Сравните это с вашим кодом:

<router-link to={name: 'Performance', params: {{project.Line_base}} }>

Кажется, вы забыли точку с запятой до to (чтоявляется сокращением для v-bind:to. Без этого все, что будет после, будет просто передано как строка, а не как выражение javascript. Это должно помочь.

Вы можете попробовать переписать в:

<router-link :to="{name: 'Performance', params: {Line_base: project.Line_base} }">

Надеюсь, что это помогает!

РЕДАКТИРОВАТЬ: добавлено уточнение