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

我正在使用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”导入警报
导出默认值{
名称：“添加”，
数据（）{
返回{
顾客：{}，
警报：“”
}
},
方法：{
添加客户（e）{
如果（！this.customer.first|u name |）！this.customer.last|u name |
！this.customer.email）{
this.alert='请填写所有必填字段'；
}否则{
让新客户={
名字：this.customer.first\u name，
姓氏：this.customer.last_name，
电话：这个。顾客。电话，
电子邮件：this.customer.email，
地址：this.customer.address，
城市：这个，顾客，城市，
状态：this.customer.state
}
这是.$http.post（'http://slimapp.dev/api/customer/add', 
新客户）
.然后（功能（响应）{
这是.$router.push（{path:'/'，query:{alert:'Customer
添加了“}}”）
});
e、 预防默认值（）；
}
e、 预防默认值（）；
}
},
组成部分：{
警觉的
}
}

这是警报组件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>


&时代；
{{message}}
导出默认值{
名称：“警报”，
道具：['message']，
数据（）{
返回{
}
}
}

这是要查看警报的组件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
  }
}


管理客户
名字
姓
电子邮件
{{客户名}
{{客户姓氏}
{{customer.email}
从“./Alert”导入警报；
导出默认值{
名称：'客户'，
数据（）{
返回{
客户：[]，
警报：“”
}
},
方法：{
获取客户（）{
这是。$http.get（'http://slimapp.dev/api/customers')
.然后（功能（响应）{
this.customers=（response.body）；
});
}
},
已创建：函数（）{
if（此.$route.params.alert）{
this.alert=$route.params.alert
}
这是fetchCustomers（）；
},
更新：函数（）{
这是fetchCustomers（）；
},
组成部分：{
警觉的
}
}





如何解决此问题？
无法按您希望的方式通过vue路由器传递数据。您只能传递如下参数：

路线定义：

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

然后您可以使用
this.$route.params.id

或者你可以：

this.$router.push（{name:'products.index'，参数：{id:1}）

我建议您添加一个GET参数，如
？success=true
，或者在推送新路由之前使用显示一个警报。
我想您的意思是：this.$router.push（{name:products.index，params:{id:1}）@Alessand啮齿动物，我实际上是指
this.$router.push（{name:'products.index'，params:{id:1}）
@EduardoAguad是正确的，
这个。$router.push（{name:'foo'，params:{foo:bar}}）
你解决了这个问题吗？