如何从url获取参数并在vue中显示答案

【问题标题】：how to get param from url and display it in vue如何从url获取参数并在vue中显示
【发布时间】：2019-12-31 05:34:54
【问题描述】：

我有一个网址： http://localhost:8080/Currency?currency=RMB 我想得到货币参数RMB

在：

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

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

在我的模板中：

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

我得到一个错误：

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

【问题讨论】：

模板中没有this - 只有$route...
@Estradiaz 我知道它可以解决，但为什么呢？
对反应性的一些见解stackoverflow.com/questions/57615156/…
模板解析器是这样设计的 - 作为 v-on stackoverflow.com/questions/57524110/… 上的示例
@Estradiaz 你能帮我解决这个问题吗？stackoverflow.com/questions/57676629/…

标签： vue.js

【解决方案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>

【讨论】：