Question

我有一条路线：

{ path: "reporting/report/result", name: "reportResult", component: ResultTable, props: true }

和路由器链接：

<router-link :to="{ name: 'reportResult', params: {reportId: 21, tableData: 'data'}}" target="_blank">{{ report.reportId }}</router-link>

但是道具不会传递给子组件。如果使用没有target="_blank"的路由器链接一切正常。可能还有另一种方法可以在新标签中打开链接并将道具传递给它吗？

Answer 1

路由器链接参数选项在查询中没有传递您的对象，如果您想要传递对象，则必须使用查询参数。根据vue路由器文档

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app" ng-controller="ctrl as vm">
    <h3>Table</h3>
    <table>
      <tr ng-repeat="c in vm.people">
        <td>{{c.name}}</td>
        <td>{{c.city}}</td>   

        <td ng-repeat-start="(key, value) in c.UserColors  | reduce">
              <b>{{key}}</b>
        </td>
        <td ng-repeat-end>
              {{value}}
        </td>
        
      </tr>
    </table>
  </body>

在您的页面中，您可以访问：

// named route
router.push({ name: 'user', params: { userId: 123 }})

// with query, resulting in /reportResult?reportId=21&tableData=data
router.push({ path: 'reportResult', query: {reportId: 21, tableData: 'data'}})

在新选项卡中打开<router-link>时，不会传递道具

1 个答案: