如何将 props 传递给 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

您可以编写一个 Mixins 文件，其中包含 returns 您 BASE_URL 的数据或函数，然后使用

导入 mixins 文件

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.

如果您想管理数据的状态，您应该看看 Vuex。

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.

更新：

也看看Vue Instance Properties.

Answer 2

要访问使用道具定义的道具：['BASE_URL']，您将使用 this.BASE_URL:

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

如何将 props 传递给 vue.js 中的所有路由？

How to pass props to all routes in vue.js?

javascript

vue.js

vue-router

vuejs2