加载带有参数的 VUE 组件答案

【问题标题】：Load a VUE component with parameters加载带有参数的 VUE 组件
【发布时间】：2018-12-27 13:34:45
【问题描述】：

我有

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

它调用了一个方法：

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

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

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

但我希望它说“Hello”，然后是“Hello Smith@jmail.com”之类的电子邮件地址。我真的需要电子邮件地址，这样我才能调用网络服务，但你好可以解决这个问题。如您所知，VUE 对我来说是新的。

我试过了：

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

但它似乎从不加载“关于”vue。感谢您的帮助。

好的——编辑——如果我使用正确的大小写“关于”或“关于”，它确实会被解雇，但我仍然需要捕获方面的帮助

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

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

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

【问题讨论】：

请提供about.vue的代码
创建一个新组件<my-a> 或其他东西并通过props 传递值？

标签： javascript vue.js vuejs2 vue-router

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

【讨论】：

这对我有用，但我想知道你能发送 2 个或更多参数吗？你将如何设置它？我在文档中没有看到。你会把它设置为一个数组并在集合端解析它吗？
您可以使用router query 发送数据，检查@codenamev 的答案，不过，您应该考虑使用Vuex 来存储和共享您应用的全局状态。

【解决方案2】：

如果您将 push 更新为 (see docs for full options)：

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

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

this.$router.query.itemEmail

【讨论】：