javascript - 如何将 Prop 传递给 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 warn]: Error in created hook: "ReferenceError: BASE_URL is not defined"

我该如何解决这个问题？

Answer 1

要访问使用 props: ['BASE_URL'] 定义的 prop，您可以使用 this.BASE_URL:

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