javascript - How to pass props to all routes in vue.js? -
i want pass base_url components. app.js like:
<template> <router-view></router-view> </template>  <script> import addjoke './components/addjoke.vue' import showjokesall './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> and routes.js:
import showjokesall './components/showjokesall.vue'; import addjoke './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'}  }   ] and in showjokesall component have:
<script> import axios '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> but components  not received base_url.
[vue warn]: error in created hook: "referenceerror: base_url not defined"
how can fix this?
to access prop define props: ['base_url'], use this.base_url:
axios.get( this.base_url + '/api/jokes').then(/*...*/) 
Comments
Post a Comment