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>

App.vue

<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

不要让Vue一遍又一遍地做同样的工作，你可以使用v-else指令，这可能对你更有效：

      <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 实际就绪。来自the docs：

就绪


获取binded 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()">

注意：这可以做一些快速＆＃34;闪烁＆＃34;一个白页。在这种情况下，您可能需要添加加载图像或类似内容，例如：

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

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

Vue等待渲染模板并显示它

3 个答案:

就绪