如何在 Laravel 内的某些页面上初始化 Vuejs + VueRouter

Question

为了更好地解释它，我正在创建一个带有 Laravel 后端的应用程序（用于学习目的），我也在尝试挂接很多东西。但是我只想创建一个或两个页面以运行 vue/vue-router 来显示某些组件。就像里面有几个单页应用程序的多页网站。

我粗略地处理了

<div id="{{ (Route::current()->getName() == 'vue-page1') ? 'app' : '' }}">
    @yield('content')
</div>

但这不是解决方案我尝试使用

使用 JS 限制页面

if (!document.getElementById("app"))

没明白，Vue还在启动。我想保留当前结构，只是为了阻止它在不应该初始化的页面上进行初始化。

Answer 1

您是否尝试过只在需要的页面中包含您的 vue.js？

@section('styles')
{{ (Route::current()->getName() == 'vue-page1') ? '<script src="https://unpkg.com/vue/dist/vue.js"></script>' : '' }}
@endsection

Answer 2

根据您发布的代码，尝试预先构建选项对象，而不是将其传递给 new Vue 实例。像这样：

let options = {
    el: '#app',
    name: 'app',
    render: app => app(App),
    data: {
        a: 1
    },
    created: function () {
        // `this` points to the vm instance
        console.log('a is: ' + this.a)
    },
    mounted() {
      console.log('done');
      auth.check()
    }
}
if(document.getElementById("app-with-routes"))//yaah we have app with routes
{
    window.VueRouter = require('vue-router');
    let router = new VueRouter({
        routes: [
            {
                path: '/',
                name: 'home',
                component: Vue.component('home', require('./components/Home.vue'))
            },
            // .... all the routes you need
            ]});
    options['router'] = router
}

const app = new Vue(options);

这样你就可以使用所有 vue 的甜蜜部分而无需处理路由器。

如何在 Laravel 内的某些页面上初始化 Vuejs + VueRouter

How to init Vuejs + VueRouter on certain pages within Laravel

laravel

vue.js

laravel-5

vue-router