Vue - przeniesienie wartości pomiędzy komponentami

Sun, 06 Jan 2019 15:05:43 +0000

Cześć,

Mam problem z dostępem do danych po dodaniu router-linka. W komponencie Header ustawiam zmienną i ją emituję. Przy odświeżeniu strony w drugim komponencie pojawia się oczekiwana wartość, jednak gdy wchodzimy poprzez linki zmienna jest gubiona i nie mogę jej odebrać poprzez eventbusa.

Z komponentu Header emituje zmienna:

<template>
  <div>
    <header class="header">
      <nav>
        <ul>
          <li><router-link to="/">Home</router-link></li>
          <li><router-link to="/first" >first Page</router-link></li>
          <li><router-link to="/second">second Page</router-link></li>
        </ul>
      </nav>
    </header>
  </div>
</template>

<script>
import EventBus from '../EventBus'

export default {
  name: 'Header',
  data () {
    return {
      token: ''
    }
  },
  methods: {
    setToken () {
      this.token = 1234
      EventBus.$emit('emittedEvent', this.token)
      console.log('Header emit', this.token)
    }
  },
  mounted () {
    console.log('mounted')
    this.setToken()
  }
}
</script>

Następnie w komponencie First odbieram:

<template>
  <div>
    First {{ getToken }}
  </div>
</template>

<script>
import EventBus from '../EventBus'
export default {
  name: 'First',
  data () {
    return {
      getToken: ''
    }
  },
  methods: {
    onUpdated (item) {
      this.getToken = item
      console.log('item', item)
    }
  },
  created () {
    EventBus.$on('emittedEvent', this.onUpdated)
  },
  beforeDestroy () {
    EventBus.$off('emittedEvent', this.onUpdated)
  }
}
</script>

Przy odświeżaniu strony wartość jest ustawiana, jeśli zaczniemy przechodzić po podstronach wartość jest gubiona. Domyślam się że mounted / created jest wykonywany tylko podczas pierwszego ładowania strony. Ale jak w takim razie mieć dostęp przez cały czas a nie tylko podczas pierwszego załadowania danych?

Vue router - user może zepsuć działanie mojej aplikacji ręcznie wpisując link

Wed, 14 Nov 2018 22:15:56 +0000

Tworzę SPA z wykorzystaniem Vue, backend w Laravelu. Mój homepage to lista itemów w widoku Home.vue . Do każdego z nich można przejść, co opisuje widok InsideSet.vue. Wszystko działa dobrze gdy użytkownik klika po router linkach, jeżeli jednak sam wpisze w przeglądarce link "z palca", to w konsoli pojawiają się różne błędy, często dotyczące Jquery mówiące np ze $(...).tooltop() is not a function. Gdy dokładnie ten sam link jest uzyskiwany poprzez kliknięcie w router link, wszystko jest ok. Jak się do tego zabrać i nie pozwolić aby wpisanie linku w pasek przeglądarki zaburzało działanie aplikacji i powodowało różne błędy? Chciałabym aby link "z zewnątrz" również był obsługiwany.

Tutaj folder z widokami .vue

Tutaj konfiguracja routera

Tutaj konfiguracja routes w laravelu

Forum Pasja Informatyki - Najnowsze z tagiem vue-router

Vue - przeniesienie wartości pomiędzy komponentami

Vue router - user może zepsuć działanie mojej aplikacji ręcznie wpisując link