Загрузить компонент VUE с параметрами - PullRequest
Новая
       7

Загрузить компонент VUE с параметрами

0 голосов
/ 27 декабря 2018

У меня есть 

<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 Smith@jmail.com».Мне действительно нужен адрес электронной почты, чтобы я мог позвонить в веб-службу, но Hello подходит для этой проблемы.Как вы можете заметить, VUE является новым для меня.

Я пробовал: 

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

, но кажется, что он никогда не загружает "about" vue.Спасибо за помощь.

OK-- edit-- Меня действительно уволят, если я использую правильный регистр 'About' или 'about', но мне все еще нужна помощь на стороне захвата

Код для vue: простой div и некоторый код скрипта: 

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

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

Ответы [ 2 ]

0 голосов
/ 27 декабря 2018

Если вы обновите свой push до ( см. Документы для полных опций ): 

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

Вы можете получить доступ к параметрам запроса ( См. Документы здесь ): 

this.$router.query.itemEmail
0 голосов
/ 27 декабря 2018

Есть много способов решения этой проблемы, вы используете 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/

...