Vue等待渲染模板并显示它

Question

我在vue.js中渲染时遇到问题。 我做了一个简单的登录/注册应用程序。 用户登录后，注册链接应该被隐藏。 它有效，但是当我重新加载页面时，延迟很小。 我尝试使用v-cloak但无法正常工作。 我该如何解决？ 我在gif上记录了加载。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>michael-client</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>
  <body>
  <style type="text/css">
    [v-cloak] {
      display:none;
    }
  </style>
  <div class="container">
    <div class="col-lg-8">
      <div id="app">
      <!-- built files will be auto injected -->
      </div>
    </div>
  </body>
</html>

应用程序

<template>
  <div class="panel panel-default" v-cloak>
    <div class="panel-heading">
      <nav>
        <ul class="list-inline">
          <li>
            <router-link :to="{ name: 'home' }">Home</router-link>
          </li>
          <li v-if="!$auth.check()" class="pull-right">
            <router-link :to="{ name: 'login' }">Login</router-link>
          </li>
          <li v-if="!$auth.check()" class="pull-right" v-cloak>
            <router-link :to="{ name: 'register' }">Register</router-link>
          </li>
          <li v-if="$auth.check()" class="pull-right">
            <a href="#" @click.prevent="$auth.logout()">Logout</a>
          </li>
        </ul>
      </nav>
    </div>
    <div class="panel-body">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

和main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import Home from './components/Home'
import Login from './components/Login'
import Register from './components/Register'
import Dashboard from './components/Dashboard'
import VueRouter from 'vue-router'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.config.productionTip = false

/* eslint-disable no-new */


Vue.use(VueRouter);
Vue.use(VueAxios, axios);
axios.defaults.baseURL = 'http://127.0.0.1:8888/api';


const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/login',
      name: 'login',
      component: Login,
      meta: {
        auth: false
      }

    },
    {
      path: '/register',
      name: 'register',
      component: Register,
      meta: {
        auth: false
      }
    }
  ]
});

Vue.router = router
Vue.use(require('@websanova/vue-auth'), {
  auth: require('@websanova/vue-auth/drivers/auth/bearer.js'),
  http: require('@websanova/vue-auth/drivers/http/axios.1.x.js'),
  router: require('@websanova/vue-auth/drivers/router/vue-router.2.x.js'),
});
App.router = Vue.router

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  render: function(createElement) {
    return createElement(App);
  }
});

你们以什么方式等待页面显示出来？

Answer 1

您可以使用v-else指令来代替让Vue一遍又一遍地执行相同的工作，它可能对您更好：

      <li v-if="!$auth.check()" class="pull-right" v-cloak>
        <router-link :to="{ name: 'register' }">Register</router-link>
      </li>
      <li v-else class="pull-right">
        <a href="#" @click.prevent="$auth.logout()">Logout</a>
      </li>

Answer 2

v-cloak没有帮助，因为一旦Vue应用程序准备就绪，它就会被立即删除。 从Vue准备就绪和$ auth函数返回响应开始，显然存在延迟。 我建议隐藏所有登录/注销链接，直到$ auth返回某些内容为止。

您必须挂钩$ auth以某种方式返回的内容，然后使用该挂钩将authCheckDone更改为true。

Vue {
  data: {
    authCheckDone: false
    ...
  }
}

<ul class="list-inline">
      <li>
        <router-link :to="{ name: 'home' }">Home</router-link>
      </li>
      <span v-if="authCheckDone">
         <li v-if="!$auth.check()" class="pull-right">
           <router-link :to="{ name: 'login' }">Login</router-link>
         </li>
         <li v-if="!$auth.check()" class="pull-right" v-cloak>
           <router-link :to="{ name: 'register' }">Register</router-link>
         </li>
         <li v-if="$auth.check()" class="pull-right">
           <a href="#" @click.prevent="$auth.logout()">Logout</a>
         </li>
      </span>
</ul>

Answer 3

您必须稍等片刻，直到vue-auth实际准备就绪为止。 从文档：

准备

获取绑定的ready属性，以了解何时完全加载和检查用户。

也可以设置单个回调，该回调将触发一次（刷新或输入）。
 <div v-if="$auth.ready()"> <vue-router></vue-router> </div> <div v-if="!$auth.ready()"> Site loading... </div> 
 created() { this.$auth.ready(function () { console.log(this); // Will be proper context. }); } 

换句话说，代替v-cloak使用：

<div class="panel panel-default" v-if="$auth.ready()">

注意：这可以使白页快速“闪烁”。 在这种情况下，您可能需要添加加载图像或类似内容：

<div v-if="!$auth.ready()">
    <img src="loading.gif">
</div>

自然，如果此div靠近另一个v-else则可以使用。

Vue等待渲染模板并显示它

问题描述

3 个解决方案

解决方案1
0 2018-03-30 17:04:38

解决方案2
0 2018-03-30 17:16:29

解决方案3
0 2018-03-30 17:44:44

准备

Vue等待渲染模板并显示它

问题描述

3 个解决方案

解决方案1 0 2018-03-30 17:04:38

解决方案2 0 2018-03-30 17:16:29

解决方案3 0 2018-03-30 17:44:44

准备

解决方案1
0 2018-03-30 17:04:38

解决方案2
0 2018-03-30 17:16:29

解决方案3
0 2018-03-30 17:44:44