Question

我有

<a role="button" v-on:click="setMemberName(item)">

它调用一个方法：

 methods:{
    setMemberName(item) {           
        alert(item.email);
        this.$router.push('about');
    }
},

警报被触发并且路由器被调用，但是我需要发送item.email的参数，并且需要在加载“ about” vue时捕获该参数。我有一个简单的警报被调用：

  ,
 mounted:function () {
    alert("Hello");
},

但是我想说“ Hello”，然后说“ Hello Smith@jmail.com”之类的电子邮件地址。我确实需要电子邮件地址，因此我可以致电网络服务，但Hello可以解决此问题。如您所知，VUE对我来说是新的。

我尝试过：

this.$router.push({ name: 'about', params: { itemEmail: item.email } })

，但似乎从未加载过“ about”提示。感谢您的帮助。

确定-编辑-如果我使用适当的大小写“ About”（关于）或“ about”（关于），则确实会被触发，但在捕获方面仍需要帮助

about vue的代码：一个简单的div和一些脚本代码：

<script>
export default {
    name: 'About',
    data() {
        return {

        }
    },
    methods:{
    },
    mounted:function () {
    alert("Hello");
  },
    created(){
    },
  } 
</script>

Answer 1

有很多解决此问题的方法，您正在使用route params，因此您需要在路线中定义参数：

routes: [
  { path: '/about/:email', component: About }
]

然后您可以在About组件中访问参数

在模板中：

<div>Email: {{ $route.params.email }}</div>

在脚本中：

sayHello() {
  alert($route.params.email);
}

请注意，您也可以使用route query params或route props，在以下位置阅读文档：https://router.vuejs.org/guide/

Answer 2

如果您将push更新为（see docs for full options）：

 this.$router.push({ name: 'about', query: { itemEmail: item.email } })

您可以访问查询参数（See docs here）：

this.$router.query.itemEmail

使用参数加载VUE组件

2 个答案: