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