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

2022-01-25 00:00:00 javascript vue.js vue-router vue-component vuejs2

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

I am creating an alert component for a CRUD app using Vue.js. I want a message to be passed to another component once data has been saved. Currently I am trying to pass this data in $router.push like this this.$router.push({path: '/', query: {alert: 'Customer Added'}}) Then access this data in another component. However this is not working as expected, instead the data is passed into the url.

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

This is the component which saves the data, 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

This the alert component, 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

And this is the component where the alert is to be viewed, 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
  }
}

我该如何解决这个问题?

How do I solve this?

推荐答案

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

It is not possible to pass data through vue-router the way you want to. You only can pass parameters like this:

路线定义:

{ 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 例如在推送新路线之前.

I suggest you to add a GET parameter like ?success=true or show an alert with sweetalert for example before pushing the new route.

相关文章