在vue-cli中怎么做app的启动页面

  • Z时代
  • 2024-01-10
  • 分类：IT

在vue-cli中怎么做app的启动页面，
在启动项目的时候先加载这个页面，图片描述
加载完之后跳转到这个页面图片描述
这个应该怎么写，要把这个页面放到项目的哪个位置中去

回答：

这不是很简单的嘛？给启动页一个组件，比如叫splash.vue，然后在mounted(){}里面做一个定时器，2s后跳转到login.vue这个组件

回答：

一楼的办法可以，不过我是这么解决的：
写一个splash.vue组件，放在app.vue根组件里面，与vue-router平级：
fixed定位，让他盖在vue-router上面
Splash.vue

<template>
  <div id="splash">
      <img src="">
  </div>
</template>
<script>
</script>
<style lang="stylus" rel="stylesheet/stylus">
  #splash
    position fixed
    top 0
    left 0
    z-index 6
    width 100%
    height 100%
    opacity 1
    transition opacity .3s ease
    box-sizing border-box
    &.fade-enter,&.fade-leave-to
      opacity 0;
</style>

App.vue

<template>
  <div id="app">
    <transition name="fade">
      <v-splash v-show="splash"></v-splash>
    </transition>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

之后在一定时间后将splash变成false就可以让splash组件隐藏，使内容显示出来

以上是 在vue-cli中怎么做app的启动页面 的全部内容， 来源链接： utcz.com/p/149661.html

回到顶部