Vue2 js从一条路径的输入传递一些值到另一条路线，或者从一条路线到另一条路线共享数据属性

Question

以vue2 js办理酒店房间预订申请。有两个屏幕1）一个获取搜索输入值2）显示搜索结果页面。看下面的屏幕截图

我的路线.js如下

class cellphone:
    cost = 30
    due = 0
    amountGB = 0
    Total = 0

    def econPlan (self, gB, gbOver):
        self.cost = 30
        self.gB = 1
        self.gbOver = 6
        self.due = 0

        while amountGB >= self.gB:
            int(amountGB - self.gB)* self.gbOver
        return self.due

        while cPlan == Econ and amountGB >= self.gB:
            print ("$",self.due)

    def normPlan (self, gB, gbOver):
        self.cost = 30
        self.gB = 5
        self.gbOver = 4

        while amountGB >= self.gB:
            int(amountGB - self.gB)* self.gbOver
        return self.due

        while cPlan == Norm and amountGB >= self.gB:
            print ("$",self.due)






print (" Which Plan do you have: econ or norm?")
print (" Econ is $30 unlimited voice and text, 1 GB data for $10, and $6 for every GB over.")
print (" Norm is $30 unlimited voice and text, 5 GB data for $30, and $4 for every GB over.")

econ = cellphone.econPlan
norm = cellphone.normPlan
cellphone.cPlan = input ("So which plan do you have? >>")
if cellphone.cPlan == econ:
    print ("you have the Economy plan")

elif cellphone.cPlan == norm:
    print ("you have the Normal plan")

cellphone.amountGB = input ("how many GB did you used >>")
if cellphone.cPlan == "Econ":
    print (cellphone.due)

我想要的是必须从第一张图片中获取和到达日期，并且必须在第二张图片中显示这些日期。

Answer 1

您想通过路线传递数据。您可以在vue的文档https://router.vuejs.org/en/essentials/passing-props.html

中了解如何实现这一目标

Answer 2

您可以在app.vue中执行以下操作：

<template>
  <router-view :items="items"></router-view>
</template>
<script>
export default {
  name: 'app',
  data() {
    return {
      items: 6
    }
  },
}
</script>

并在Check.vue组件中：

<template>
  <div>{{items}}</div>
</div>
</template>
<script>
export default {
  name: 'FrontEndCheck',
  props: ['items'],
}
</script>

换句话说，您可以将组件道具的逻辑应用于router-view（因为它是一个组件）。它适用于我的应用程序。