Vue + Turbolinks,如何在页面加载后初始化组件

时间:2016-02-08 19:41:31

标签: javascript vue.js turbolinks

我总是设置一个根(新的Vue),然后添加组件。然后在我的视图中,我使用当时需要的组件。例如:

// gulp.js:我的构建工具

var elixir = require('laravel-elixir');
var paths = require('./resources/paths.js');
var config = require('./resources/config.js');

elixir.config.publicPath = paths.public;

elixir(function(mix) {
    mix
    .copy('resources/assets/images',paths.images)
    .copy('resources/assets/vendors/bootstrap-colorpicker/img',paths.images)
    .copy('node_modules/simple-line-icons/fonts',paths.fonts)
    .copy('node_modules/bootstrap/fonts',paths.fonts+'/bootstrap')
    .styles(paths.vendor.css, paths.css+'/vendor.css')
    .scripts(paths.vendor.js, paths.scripts+'/vendor.js')
    .sass('app.scss')
    .babel('app.js')
    .browserify('app.js')
    .version(paths.versioned)
    .browserSync(config.browsersync);
});

//我的app.js

    var Vue = require('vue');
    var VueResource = require('vue-resource');
    // Load resources into Vue
    Vue.use(VueResource);

    // Load store
    var Store = require('./store');

    // Set Vue to debug state
    Vue.config.debug = true;
    // Set the headers
    Vue.http.headers.common['X-CSRF-TOKEN'] = Greenchoice.csrfToken;
    Vue.http.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('id_token');

    // Components
   new Vue({
        el: 'body',
        data: Store,
        data() {
            return {
                'store': Store
            }
        },
        ready() {
            this.store.router = this.$http;
            this.$broadcast('application-ready');
        },
        components: {
            'specialtype-builder': require('./components/specialtypes/specialtype-builder'),
            'fieldgroup-builder': require('./components/fieldgroups/fieldgroup-builder')
        }
    });

//我的模板

@extends('layouts.app')

    @section('content')

    <div class="container spark-screen">
        <div class="row">


            <div class="col-md-12">
               <!-- MY COMPONENT -->
                <specialtype-builder :store="store" :uuid="'{!! $specialtype->id !!}'" />

            </div>
        </div>
    </div>
    @endsection

我的问题

上面的视图是通过Turbolinks加载的。 https://github.com/turbolinks/turbolinks

我如何让它运作?任何经历?此时,组件未启动。

0 个答案:

没有答案