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警告]：创建的钩子出错：＆＃34; ReferenceError：BASE_URL不是定义＆＃34;

我该如何解决这个问题？

Answer 1

要使用props访问prop定义：['BASE_URL']，您将使用this.BASE_URL：

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

Answer 2

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

导入mixins文件

import myMixins from './my_mixins.js'

Mixins是一种为Vue组件分发可重用功能的灵活方式。 mixin对象可以包含任何组件选项。当组件使用mixin时，mixin中的所有选项都将“混合”到组件自己的选项中。

如果您想管理数据的状态，请查看Vuex。

Vuex是Vue.js应用程序的状态管理模式+库。它充当应用程序中所有组件的集中存储，其规则确保状态只能以可预测的方式进行变异。

<强>更新

还要看一下Vue Instance Properties。

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

2 个答案: