[英]How can I use Laravel's baseurl on the vue.js 2?
我有2个组件
组件1,名称是SearchResultVue.vue组件
组件是这样的:
<template>
...
<span class="pull-right" v-show="totalall>8">
<pagination :data="list" :baseUrl="this.Laravel.baseUrl" :total="totalPage" :nextPage="nextPage" :prevPage="prevPage"></pagination>
</span>
...
</template>
组件调用组件2.名称是Pagination.vue组件
分页组件是这样的:
<template>
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a :href="prevPage" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li v-for="i in total">
<a :href="baseUrl+'/search-result?page='+i">{{i}}</a>
</li>
<li>
<a :href="nextPage" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</template>
<script>
export default{
props:['total', 'data', 'nextPage', 'prevPage'],
computed:{
baseUrl(){
return window.Laravel.baseUrl
}
}
}
</script>
执行时,在控制台中存在2个错误
错误1是这样的:
[Vue警告]:属性或方法“Laravel”未在实例上定义,但在渲染期间引用。 确保在数据选项中声明反应数据属性。
错误2是这样的:
未捕获的TypeError:无法读取未定义的属性“baseUrl”
我该如何解决错误?
您需要将其附加到window
。 我想混淆的来源,因为Laravel使得csrf_token
通过提供Laravel.csrfToken
但要做到这一点,它会在以下header
:
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
就个人而言,我不喜欢将php
与javascript
混合,但如果你真的想将baseurl
添加到你的全局Laravel
对象中,你可以这样做:
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
'baseUrl' => base_url()
]); ?>
这是JSFiddle: https ://jsfiddle.net/w6szt02q/
在webpack配置中设置env变量。
module.exports = {
NODE_ENV: '"production"',
BASE_URL: '"http://myshop.ct-staging.tk'",
}
// config/dev.env.js
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
BASE_URL: '"http://myshop.dev/"' // this overrides the BASE_URL value of prod.env
})
在Vue应用中使用它。
Vue.config.baseurl = process.env.BASE_URL
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.