如何將道具傳遞給 vue.js 中的所有路由？

Question

我想將BASE_URL傳遞給所有組件。 我的 App.js 就像：

<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>

還有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'}  }  
]

在showJokesAll組件中我有：

<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>

但是組件沒有收到BASE_URL 。

[Vue 警告]：創建鈎子時出錯：“ReferenceError：未定義 BASE_URL”

我怎樣才能解決這個問題？

Answer 1

要使用 props: ['BASE_URL'] 訪問 prop 定義，您可以使用this.BASE_URL ：

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

Answer 2

您可以編寫一個包含數據的Mixins文件或返回 BASE_URL 的函數，然后使用導入 mixins 文件，

import myMixins from './my_mixins.js'

Mixin 是一種為 Vue 組件分發可重用功能的靈活方式。 mixin 對象可以包含任何組件選項。 當組件使用 mixin 時，mixin 中的所有選項都會“混合”到組件自己的選項中。

如果你想管理數據的狀態，你應該看看Vuex 。

Vuex 是 Vue.js 應用程序的狀態管理模式 + 庫。 它充當應用程序中所有組件的集中存儲，其規則確保狀態只能以可預測的方式發生變化。

更新：

也看看Vue Instance Properties 。