Question

我有一个网址： http://localhost:8080/Currency?currency=RMB 我想获取RMB

的货币参数

在：

created(){
    this.currencyParam = this.$route.query.currency;
    console.log(curr: ${this.currencyParam});
}

我可以在curr: RMB中得到F12 - console，但是在F12 -Vue中我得到currency:undefined

在我的模板中：

<template v-else>
          <gateway
            :currency="this.$route.query.currency"
          />
</template>

我收到一个错误：

渲染错误：“ TypeError ：无法读取在F12 -Vue和currency:undefined中发现的未定义属性'$ route'，我仍然得到{{1}}

Answer 1

您可以添加一个watch属性，该属性允许您侦听查询参数中的更改

data () {
  return {
   currencyParam = null
  }
},
watch: {
    '$route.query.currency': function () {
       if(this.$route && this.$route.query.currency) { // if not undefined
            console.log(`curr: ${this.$route.query.currency}`);
            this.currencyParam = this.$route.query.currency;
       }
    }
  }

也可以这样更改模板；

<template>
   <gateway v-if="currencyParam" :currency="currencyParam" />
</template>

如何从URL获取参数并在Vue中显示

1 个答案: