加载带参数的 VUE 组件

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" 这样的电子邮件地址。我真的需要电子邮件地址，所以我可以调用网络服务，但你好可以解决这个问题。如您所知，VUE 对我来说是新手。

我试过：

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

但它似乎从未加载 'about' vue。感谢您的帮助。

OK-- 编辑--如果我使用正确的大小写 '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 组件

Load a VUE component with parameters

javascript

vue.js

vue-router

vuejs2