Javascript Vue JS。通过路由器传递道具

我希望有一个由用户选择的盘子数组，以及它们在父组件中的数组

selectedDishes

中的数量，并在路由器的所有其他组件中使用此数据。这里我有

dish

组件，但我将在

checkout

组件中使用

selecteddishs

如何通过路由器将

selecteddishs

传递到

disks

组件？这样做正确吗？（我读了这篇文章，上面只说要把

:dish

从这里弄出去

/dish/:dish

）

我只想从父组件访问

selectedDishes

。所以，如果我在

dish

或

checkout

组件中更改了盘的数量，它应该发送给父组件，然后作为道具发送回子组件。这样做对吗

父组件：

<template>
    <view-router v-on:addQuantity="addQuantity(...arguments)"></view-router>
</template>
<script>
    data: () => ({
        //How to pass this to dishes component?
        selectedDishes: [{name:'Soup', quantity: 10}, {name:'Sushi', quantity: 5}],
    }),
    methods: function(){
             addQuantity: function(dishName){
                        this.selectedDishes.forEach(function(item, index){
                            if(item.name == dishName){
                                this.selectedDishes[index].quantity +=1
                            }
                        })
             }
    }
</script>

import VueRouter from 'vue-router';

let routes = [
    {
        path: '/',
        component: require ('./components/vmMain'),
        children: [
            {
                path: 'dishes/:dish',
                component: require ('./components/Dishes')
            }
        ],
    },
]

盘子组件：

<template>
    <div
         // If URL is 'dishes/Soup' I want to see the following result
         //<h1>Soup</h1>
         //<h2>10</h2>
         <h1>dish.name</h1>//currently I access it as this.$route.params.dish
         <h2>dish.quantity</h2> //and don't have access to quantity
         <button v-on:click="addQuantity(dish.name)">add</button>
    </div>
</template>

<script>
    methods: function(){
             addQuantity: function(dishName){
                        this.$emit('addQuantity', dishName)
             }
    },
    //How to pass prop from parent component?
    props['dish']
</script>

您将为菜肴创建商店，如下所示

 const store = new Vuex.Store({
  state: {
    dishes: [
      {

    name: '',
    quanity: ''
      }
    ]
  },
  getters: {
    getAllDishes: state => state.dishes,
    getDishByName: (state) => (name) => {
         return state.dishes.find(dish => dish.name === name)
    }
  },
  mutatations: {
  },

})

Dish name作为vue路由器的路径变量提供，您可以查询存储以获取完整详细信息

要了解更多信息，请阅读下面的URL


您应该管理存储中的状态，而不是传递状态router@rupesh_padhye你能提供更多的细节或例子吗