Wie können Requisiten an alle Routen in vue.js übergeben werden?

Question

Ich möchte BASE_URL an alle Komponenten übergeben. Mein App.js ist wie:

<template> 
<router-view></router-view> 
</template> 

<script> 
import addJoke from './components/addJoke.vue' 
import showJokesAll from './components/showJokesAll.vue' 

export default { 
    components: { 
    'add-joke': addJoke, 
    'show-jokes-all': showJokesAll 
    }, 

    data() { 
    return { 
     BASE_URL : 'http://127.0.0.1:8090'  
    } 
    } 
} 
</script> 

<style> 
</style> 

Und die routes.js:

import showJokesAll from './components/showJokesAll.vue'; 
import addJoke from './components/addJoke.vue'; 

export default [ 
    {path:'/', component: showJokesAll, props: {BASE_URL: 'http://127.0.0.1:8090'} }, 
    {path:'/add', component: addJoke, props: {BASE_URL: 'http://127.0.0.1:8090'} } 
] 

und in showJokesAll Komponente Ich habe:

<script> 
import axios from 'axios'; 

    export default { 
     name: 'showJokesAll', 
     props: ['BASE_URL'], 
     data() { 
     return { 
      jokes:[]    
     } 
     }, 
     methods: { 
     }, 

     created() { 
     axios.get(BASE_URL + '/api/jokes').then(response => this.jokes = response.data); 

    } 
} 
</script> 

Aber die Komponenten BASE_URL nicht empfangen.

[Vue warn]: Error in created hook: "ReferenceError: BASE_URL is not defined"

Wie kann ich das beheben?

Answer 1

Für den Zugriff auf die Stütze mit Requisiten definieren:

axios.get(this.BASE_URL + '/api/jokes').then(/*...*/) 

Answer 2

Sie können eine Mixins Datei schreiben, die Daten oder eine Funktion enthält, die Ihre BASE_URL zurückkehrt und dann importieren Mixins mit Datei,

import myMixins from './my_mixins.js' 

Mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be “mixed” into the component’s own options.

Wenn Sie den Zustand der Daten verwalten möchten Sie haben sollten ein Blick auf Vuex.

Auch ein ein Vue Instance Properties aussehen haben:

Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.

aktualisiert.