如何在 Vue.js 中传递 $router.push 中的数据？

Posted 2023-02-22

【中文标题】如何在 Vue.js 中传递 $router.push 中的数据？

【英文标题】：How do I pass data in $router.push in Vue.js?

【发布时间】：2018-05-13 09:46:57

【问题描述】：

我正在使用 Vue.js 为 CRUD 应用程序创建警报组件。我希望在保存数据后将消息传递给另一个组件。目前我正在尝试在$router.push 中传递这些数据，就像这样this.$router.push(path: '/', query: alert: 'Customer Added') 然后在另一个组件中访问这些数据。但是，这并没有按预期工作，而是将数据传递到 url。

这是保存数据的组件，Add.vue

<template>
<div class="add container">
<Alert v-if="alert" v-bind:message="alert" />
<h1 class="page-header">Add Customer</h1>
<form v-on:submit="addCustomer">
    <div class="well">
        <h4>Customer Info</h4>
        <div class="form-group">
            <label>First Name</label>
            <input type="text" class="form-control" placeholder="First Name" 
            v-model="customer.first_name">
        </div>
        <div class="form-group">
            <label>Last Name</label>
            <input type="text" class="form-control" placeholder="Last Name" 
            v-model="customer.last_name">
        </div>
    </div>
    <div class="well">
        <h4>Customer Contact</h4>
        <div class="form-group">
            <label>Email</label>
            <input type="text" class="form-control" placeholder="Email" v-model="customer.email">
        </div>
        <div class="form-group">
            <label>Phone</label>
            <input type="text" class="form-control" placeholder="Phone" v-model="customer.phone">
        </div>
    </div>

    <div class="well">
        <h4>Customer Location</h4>
        <div class="form-group">
            <label>Address</label>
            <input type="text" class="form-control" placeholder="Address" v-model="customer.address">
        </div>
        <div class="form-group">
            <label>City</label>
            <input type="text" class="form-control" placeholder="City" v-model="customer.city">
        </div>
        <div class="form-group">
            <label>State</label>
            <input type="text" class="form-control" placeholder="State" v-model="customer.state">
        </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</template>

<script>
import Alert from './Alert'
export default 
name: 'add',
data () 
    return 
    customer: ,
    alert:''
    
,
methods: 
    addCustomer(e)
        if(!this.customer.first_name || !this.customer.last_name || 
!this.customer.email)
            this.alert = 'Please fill in all required fields';
         else 
            let newCustomer = 
                first_name: this.customer.first_name,
                last_name: this.customer.last_name,
                phone: this.customer.phone,
                email: this.customer.email,
                address: this.customer.address,
                city: this.customer.city,
                state: this.customer.state
            
            this.$http.post('http://slimapp.dev/api/customer/add', 
            newCustomer)
                .then(function(response)
                    this.$router.push(path: '/', query: alert: 'Customer 
            Added')

                );
            e.preventDefault();
            
            e.preventDefault();
            
            ,
            components: 
             Alert
            
            
            </script>

            <!-- Add "scoped" attribute to limit CSS to this component only 
            -->
            <style scoped>
            </style>

这是警报组件，Alert.vue

<template>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span></button>
message
</div>
</template>

<script>
export default 
name: 'alert',
props: ['message'],
data () 
return 




</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

这是要查看警报的组件，Customers.vue

<template>
<div class="customers container">
<Alert v-if="alert" v-bind:message="alert" />
<h1 class="page-header">Manage Customers</h1>
<table class="table table-striped">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="customer in customers">
      <td>customer.first_name</td>
      <td>customer.last_name</td>
      <td>customer.email</td>
      <td></td></tr>
  </tbody>
</table>

</div>
</template>

<script>
import Alert from './Alert';

export default 
name: 'customers',
data () 
return 

  customers: [],
  alert: ''

 
,

methods: 
fetchCustomers()
  this.$http.get('http://slimapp.dev/api/customers')
    .then(function(response)

      this.customers = (response.body); 
    );
  
 ,
created: function()
 if (this.$route.params.alert) 
   this.alert = $route.params.alert
 
 this.fetchCustomers();
,
updated: function()
this.fetchCustomers();
,
components: 
  Alert
  

我该如何解决这个问题？

【问题讨论】：

你解决了吗？

【参考方案1】：

通过 vue-router 传递数据是不可能的。你只能这样传递参数：

路线定义：

 path: '/products/:id/edit', name: 'products.edit', component: ProductForm ,

然后就可以用this.$route.params.id获取参数了

或者你可以这样做：

this.$router.push(name: 'products.index', params:  id: 1 )

我建议您添加一个 GET 参数，例如 ?success=true 或使用 sweetalert 显示警报，然后再推送新路由。

【讨论】：

我想你的意思是：this.$router.push(name: products.index, params: id: 1 )

@AlessandroDentella 我的意思是this.$router.push(name: 'products.index', params: id: 1 )

@EduardoAguad 是正确的，this.$router.push(name: 'foo', params: foo: bar )