Question

我将Vue和Laravel一起用作SPA。我有一个问题，我第一次点击应用程序上的链接，我看到一个闪光灯，然后页面过渡是平滑的。

我在此处添加了一段15秒的视频，展示了这个问题：https://drive.google.com/file/d/0BxrP6oa1_a_EcndHWWxBTHgzeEU/view?usp=sharing

我使用的唯一插件是vue-router和vuetify。

这是我的输入文件app.js

import Vue from 'vue';
import Vuetify from 'vuetify';
import VueRouter from 'vue-router';

import App from './views/app.vue';

Vue.use(Vuetify);
Vue.use(VueRouter);

window.Vue = Vue;

const Foo = { template: '<div>foo</div>' };
const Bar = { template: '<div>bar</div>' };
const Bit = { template: '<div>bit</div>' };
const Bat = { template: '<div>bat</div>' };

const routes = [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar },
    { path: '/bit', component: Bit },
    { path: '/bat', component: Bat }
];

const router = new VueRouter({
    routes // short for `routes: routes`
});

const app = new Vue({
    el: '#app',
    render: h => h(App),
    router
});

这是我的主要模板文件app.vue

<template>
    <v-app id="example-2" standalone>
        <v-navigation-drawer persistent dark :mini-variant.sync="mini" v-model="drawer" overflow>
            <v-toolbar flat class="transparent">
                <v-list class="pa-0">
                    <v-list-tile avatar tag="div">
                        <v-list-tile-avatar>
                            <img src="https://randomuser.me/api/portraits/men/85.jpg" />
                        </v-list-tile-avatar>
                        <v-list-tile-content>
                            <v-list-tile-title>John Leider</v-list-tile-title>
                        </v-list-tile-content>
                        <v-list-tile-action>
                            <v-btn icon @click.native.stop="mini = !mini">
                                <v-icon>chevron_left</v-icon>
                            </v-btn>
                        </v-list-tile-action>
                    </v-list-tile>
                </v-list>
            </v-toolbar>
            <v-list class="pt-0" dense>
                <v-divider></v-divider>
                <v-list-tile v-for="item in items" :key="item.title" route :to="item.path">
                    <v-list-tile-action>
                        <v-icon>{{ item.icon }}</v-icon>
                    </v-list-tile-action>
                    <v-list-tile-content>
                        <v-list-tile-title>{{ item.title }}</v-list-tile-title>
                    </v-list-tile-content>
                </v-list-tile>
            </v-list>
        </v-navigation-drawer>
        <v-toolbar fixed class="indigo darken-4" dark>
            <v-toolbar-side-icon @click.native.stop="drawer = !drawer"></v-toolbar-side-icon>
            <v-toolbar-title>Toolbar</v-toolbar-title>
        </v-toolbar>
        <main>
            <v-container fluid>
                <router-view></router-view>
            </v-container>
        </main>
    </v-app>
</template>

<script>
    export default {
        data () {
            return {
                drawer: true,
                items: [
                    { title: 'Foo', icon: 'dashboard', path: '/foo' },
                    { title: 'Bar', icon: 'question_answer', path: '/bar' },
                    { title: 'Bit', icon: 'home', path: '/bit' },
                    { title: 'Bat', icon: 'settings', path: '/bat' }
                ],
                mini: false,
                right: null
            }
        }
    }
</script>

我还在这里分享了完整的代码：https://github.com/andrewex/laravel-vue-test

Laravel和Vue的问题

0 个答案: