Как инициировать Vuejs + VueRouter на определенных страницах в Laravel

Question

Чтобы объяснить это лучше, я создаю приложение с бэкэндом Laravel (для учебных целей), и я слишком много пытаюсь подключить. Но я хочу создать только одну или две страницы для запуска vue/vue-router, чтобы отобразить определенные компоненты. Как многостраничный сайт с несколькими одностраничными приложениями.

Я резал

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

но это не решение, я пытался ограничить страницы после этого с помощью JS

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

не понимает, Vue все еще инициируется. Я хочу сохранить текущую структуру, просто чтобы она не инициализировалась на страницах, где она не должна.

Answer 1

Основываясь на опубликованном вами коде, попробуйте сначала создать объект параметров, чем передать его 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);

Таким образом, вы сможете использовать все полезные функции без необходимости работать с маршрутизатором.

Answer 2

Вы пытались включить vue.js только в те страницы, которые вам нужны?

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