javascript - 将json数据从一个vue页面传递到另一个vue页面并渲染图表

Question

我正在 vue 中的表内遍历 json 数据，并使用路由器链接将其中一些数据传递到不同的页面。

 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组件中，你需要像这样从路由中获取参数。

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