如何在vue.js 2上使用Laravel的baseurl？

Question

我有两个组成部分

组件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">&laquo;</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">&raquo;</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”未在实例上定义，但在渲染期间被引用。确保在data选项中声明反应性数据属性。

错误2是这样的：

未捕获的TypeError：无法读取未定义的属性'baseUrl'

我该如何解决错误？

Answer 1

您需要将其附加到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/