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

似乎您正在犯语法错误。以下是来自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表达式传递。这会有所帮助。 / p>

您可以尝试重写为：

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

希望有帮助！

编辑：添加了说明

Answer 2

发送这样的参数；

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

将json数据从一个vue页传递到另一个vue页并呈现图表

2 个答案: