将 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>

这个 project.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
  }
}

Answer 2

您似乎正在犯语法错误。这是来自 vue 路由器 docs 的示例：

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

在文档中进一步说明了路由器链接属性，说明：

路由参数

类型：对象

包含动态段和星号的键/值对的对象 段。如果没有参数，则该值将是一个空对象。

将其与您的代码进行比较：

<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} }">

希望有帮助！

编辑：添加说明