vue 中使用动画技术

简介: 本文介绍在 vue 中使用如何动画相关技术

vue 中使用动画技术


上一节:《vue2 与 vue3 中实现全局事件总线 | 下一节:《vue 的内置组件分析


jcLee95

已入驻阿里云社区

邮箱 :291148484@163.com
本文地址
- https://developer.aliyun.com/article/1213056
- https://blog.csdn.net/qq_28550263/article/details/122892028
// TODO: 
// 增加 [animejs](#https://animejs.com/)、[Motion One](#https://motion.dev/) 结合vue trasition的用法

相关文章推荐:


目 录


1. vue 中的相关基础知识

2. 使用 Animate.css

2.3 与内置组件 Transition 一起使用


1. vue 中的相关基础知识

1.1 处理过渡和动画的内置组件

组件名 描述
Transition 用于在元素或组件进入离开 DOM 时应用动画。
TransitionGroup 用于在将元素组件插入列表从列表删除在v-for列表中移动 时应用动画。

1.1.1 Transition

作为VUE内置组件,可以在任何VUE组件的模板中使用,而无需注册它。

1.1.1.1 Transition 的触发方式

1) 通过条件渲染 (v-if);
2) 通过条件显示 (v-show
3) 通过特殊元素切换动态组件()
4) 通过路由切换:需要 VueRouter 中  的 v-slot API。

6666666666666.png

CSS类名 描述
v-enter-from 进入的起始状态。在元素插入之前添加,在元素插入后一帧移除。
v-enter-active 进入的活动状态。在整个进入阶段应用。在插入元素之前添加,在过渡/动画完成时移除。此类可用于定义进入过渡的持续时间、延迟和缓动曲线。
v-enter-to 进入的结束状态。在元素插入后添加一帧(同时v-enter-from被移除),在过渡/动画完成时移除。
v-leave-from 休假的开始状态。触发离开过渡时立即添加,一帧后删除。
v-leave-active 休假的活动状态。在整个离开阶段应用。在触发离开过渡时立即添加,在过渡/动画完成时删除。此类可用于定义离开过渡的持续时间、延迟和缓动曲线。
v-leave-to 休假的结束状态。在触发离开过渡后添加一帧(同时v-leave-from删除),在过渡/动画完成时删除。
v-enter-activev-leave-active让我们能够为进入/离开过渡指定不同的缓动曲线。

例如:

<template><button@click="show = !show"> {{show}}</button><transition><h1:class="{animate__animated:true, animate__fadeIn:show,animate__fadeOut:!show,}">一段淡入淡出的动画文字。
</h1></transition></template><scriptlang="ts">import { defineComponent, ref } from'vue';
exportdefaultdefineComponent({
setup(){
return {
show: ref(true)
    }
  }
});
</script><style>.v-enter-active,
.v-leave-active {
transition: opacity0.5sease;
}
.v-enter-from,
.v-leave-to {
opacity: 0;
}
</style>

1.1.1.2 Transition 的 name 属性

我们可以指定transition名(name属性),则以上类名中的v将被替换成对应的transition名。上例中,可以改为:

<template><button@click="show = !show"> {{show}}</button><transitionname="fade"><h1:class="{animate__animated:true, animate__fadeIn:show,animate__fadeOut:!show,}">一段淡入淡出的动画文字。
</h1></transition></template><scriptlang="ts">import { defineComponent, ref } from'vue';
exportdefaultdefineComponent({
setup(){
return {
show: ref(true)
    }
  }
});
</script><style>.fade-enter-active,
.fade-leave-active {
transition: opacity0.5sease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>

可以看到,这里对应的CSS类名也都由v变成了fade,如.v-enter-active变成了.fade-enter-active,这里的效果还是一样的,只是为了我们控制页面上的多个动画元素时用以区别。

1.1.1.3 自定义 Transition 类

自定义 Transition 类对于开发者来说是非常友好的,因为很多时候使用形如v-enter-from这种格式的CSS类名容易限制我们的开发。尤其当我们使用第三方的CSS库的时候,我们大概率没有办法更改该第三方库提供的类名,需要将这些动画类于vue提供的类名做对应1.1.1.3 自定义 Transition 类解决的就是这个问题。

这里我们使用了一个第三方动画库Animate.css,将在后面有详细地介绍。

<template><transitionname="custom-classes"enter-active-class="animate__animated animate__tada"leave-active-class="animate__animated animate__bounceOutRight"><pv-if="show">hello</p></transition></template><scriptlang="ts">import { defineComponent, ref } from'vue';
import'animate.css';
exportdefaultdefineComponent({});
</script>

可以理解,这里我们将enter-active-class对应了animate__animatedanimate__tada两个类,leave-active-class对应了animate__animatedanimate__bounceOutRight两个类。其中enter-active-class也就相当于之前的.v-enter-activeleave-active-class也就相当于v-leave-active。我们可以定义的属性有如下:

  • enter-from-class,相当于以前单个类名v-enter-from所描述的样式
  • enter-active-class,相当于以前单个类名v-enter-active所描述的样式
  • enter-to-class,相当于以前单个类名v-enter-to所描述的样式
  • leave-from-class,相当于以前单个类名v-leave-from所描述的样式
  • leave-active-class,相当于以前单个类名v-leave-active所描述的样式
  • leave-to-class,相当于以前单个类名v-leave-to所描述的样式

有时

1.1.1.4 Transitions 和 Animations 一起使用

Vue 需要附加事件监听器(watch)才能知道转换何时结束。它可以是 transitionend 或 animationend,具体取决于所应用的 CSS 规则的类型。如果您只使用其中一种,Vue 可以自动检测正确的类型。

但是,在某些情况下,您可能希望将两者都放在同一个元素上,例如让 Vue 触发 CSS 动画,以及悬停时的 CSS 过渡效果。在这些情况下,您必须通过传递 prop 来显式声明您希望 Vue 关心的类型type,其值为animation 或者 transition:

<Transitiontype="animation">...</Transition>

1.1.1.5 嵌套转换和显式转换持续时间

虽然过渡类只应用于中的直接子元素,但我们可以使用嵌套 CSS 选择器来过渡嵌套元素:

<Transitionname="nested"><divv-if="show"class="outer"><divclass="inner">      Hello
</div></div></Transition>
/* rules that target nested elements */.nested-enter-active.inner,
.nested-leave-active.inner {
transition: all0.3sease-in-out;
}
.nested-enter-from.inner,
.nested-leave-to.inner {
transform: translateX(30px);
opacity: 0;
}

我们甚至可以在 enter 的嵌套元素中添加一个过渡延迟,从而创建一个交错的 enter 动画序列:

/* delay enter of nested element for staggered effect */.nested-enter-active.inner {
transition-delay: 0.25s;
}

但是,这会产生一个小问题。默认情况下,组件尝试通过侦听根过渡元素上的第一个transitionendanimationend事件来自动确定过渡何时完成。对于嵌套转换,所需的行为应该等待所有内部元素的转换完成。

在这种情况下,您可以使用组件上的 duration prop 指定显式转换持续时间(以毫秒为单位)。总持续时间应与内部元素的延迟加上过渡持续时间相匹配:

<Transition:duration="550">...</Transition>

1.1.1.6 为使用JavaScript 钩子

可以通过侦听组件上的事件来使用 JavaScript 挂钩到转换过程:

<Transition@before-enter="onBeforeEnter"@enter="onEnter"@after-enter="onAfterEnter"@enter-cancelled="onEnterCancelled"@before-leave="onBeforeLeave"@leave="onLeave"@after-leave="onAfterLeave"@leave-cancelled="onLeaveCancelled"><!-- ... --></Transition>
exportdefault {
// ...methods: {
// 在元素插入到DOM之前调用。// 用它来设置元素的“enter-from”状态onBeforeEnter(el) {},
// 插入元素后一帧调用。// 用它来开始动画。onEnter(el, done) {
// 调用done回调来指示transition结束// 如果与CSS结合使用,则可选done()
    },
// 当进入 transition 完成时调用。onAfterEnter(el) {},
onEnterCancelled(el) {},
// 在离开钩子前调用// 大多数情况下,你应该使用离开钩子。onBeforeLeave(el) {},
// 离开 transition 开始时调用。// 使用这个开始离开动画。onLeave(el, done) {
// 调用done回调来指示 transition 结束// 如果与CSS结合使用,则可选done()
    },
// 当离开 transition 完成并且元素已经从DOM中移除时调用。onAfterLeave(el) {},
// 当且仅当使用 v-show transitions 时有效leaveCancelled(el) {}
  }
}

这些钩子可以与 CSS 过渡/动画结合使用,也可以单独使用。使用:css="false",我们还完全负责控制过渡何时结束。在这种情况下,@enter@leave钩子完成需要回调。否则,钩子将被同步调用,转换将立即完成。

1.1.2 TransitionGroup

作为VUE内置组件,可以在任何VUE组件的模板中使用,而无需注册它。

TransitionGroup 专用于为列表中呈现的元素或组件的插入、删除和顺序更改设置动画,支持与 Transition 相同的 props、CSS 转换类和 JavaScript 钩子侦听器 。

默认情况下,不渲染包装 DOM 元素,但可以通过 tag 属性 定义。

<TransitionGrouptag="ul"name="slide"><liv-for="item in items":key="item.id">    {{ item.text }}
</li></TransitionGroup>

支持通过 CSS 变换移动过渡。当更新后孩子在屏幕上的位置发生变化时,它将应用一个移动的 CSS 类(从name属性自动生成或使用move-class道具配置)。如果在应用移动类时 CSS transform属性是“可转换的”,则元素将使用FLIP 技术平滑地动画到其目的地。

1.1.2.1 进入/离开过渡

下面是一个将进入/离开转换应用到v-for列表的示例:

<template><button@click="add()"> 添加 </button><button@click="pop()"> 删除 </button><TransitionGroupname="list"tag="ul"><liv-for="item in items":key="item">    {{ item }}
</li></TransitionGroup></template><scriptlang="ts">import { defineComponent, ref } from'vue';
exportdefaultdefineComponent({
setup(){
return {
items: ref([1,2,3,4,5,6])
    }
  },
methods:{
add(){
this.items.push(
Math.round(Math.random()*10)
      )
    },
pop(){
this.items.pop()
    }
  }
});
</script><stylelang="scss"scoped>.list-enter-active,
.list-leave-active {
transition: all0.5sease;
}
.list-enter-from,
.list-leave-to {
opacity: 0;
transform: translateX(30px);
}
</style>

1.1.2.2 移动过渡

上面的演示有一些明显的缺陷:当一个项目被插入或移除时,它周围的项目会立即“跳”到位,而不是平稳地移动。我们可以通过添加一些额外的 CSS 规则来解决这个问题:

.list-move, /* 应用 transition 来移动元素 */.list-enter-active,
.list-leave-active {
transition: all0.5sease;
}
.list-enter-from,
.list-leave-to {
opacity: 0;
transform: translateX(30px);
}
/* 确保离开项目从布局流中移除,以便可以正确计算移动动画。 */.list-leave-active {
position: absolute;
}

1.1.2.3 交错列表转换

通过数据属性与 JavaScript 进行通信,还可以在列表中交错转换。首先,我们将项目的索引渲染为 DOM 元素上的数据属性:

<TransitionGrouptag="ul":css="false"@before-enter="onBeforeEnter"@enter="onEnter"@leave="onLeave"><liv-for="(item, index) in computedList":key="item.msg":data-index="index">    {{ item.msg }}
</li></TransitionGroup>

然后,在 JavaScript 钩子中,我们根据数据属性为元素设置一个延迟动画:

functiononEnter(el, done) {
gsap.to(el, {
opacity: 1,
height: '1.6em',
delay: el.dataset.index*0.15,
onComplete: done  })
}

1.2 在 Vue Router中使用 transition组件

的 v-slot

Vue Router v4.x(对应vue3) 中, 暴露了一个 v-slot API,主要使用 和 组件来包裹你的路由组件。 transitionkeep-alive 组件必须通过 v-slot API 在 RouterView 内部使用,如:

<router-viewv-slot="{ Component }"><transition><keep-alive><component:is="Component"/></keep-alive></transition></router-view>

其中, Component是要传递给 的 VNodes 是 prop。显然 router-view 中使用插槽时 v-slot 是用于接收对象的,Component 代表的就是需要加载的组件,这将传给内置组件的is使用。除了接收需要渲染的组件外,还接收一个route对象,这个对象包含了对应于当前渲染的组件的路由信息。如:

<Suspense><template#default><router-viewv-slot="{ Component, route }"><transition:name="route.meta.transition || 'fade'"mode="out-in"><keep-alive><component:is="Component":key="route.meta.usePathKey ? route.path : undefined"/></keep-alive></transition></router-view></template><template#fallback> Loading... </template></Suspense>

由于所有的导航,包括第一个导航,现在都是异步的,这意味着,如果你使用一个 transition,你可能需要等待路由 ready 好后再挂载程序:

app.use(router)
// 注意:在服务器端,你需要手动跳转到初始地址。router.isReady().then(() =>app.mount('#app'))

否则会有一个初始过渡,就像你提供了 appear 属性到 transition 一样,因为路由会显示它的初始地址(什么都没有),然后显示第一个地址。

请注意,如果在初始导航时有导航守卫,你可能不想阻止程序渲染,直到它们被解析,除非你正在进行服务器端渲染。否则,在这种情况下,不等待路由准备好挂载应用会产生与 Vue2 中相同的结果。

2. 使用 Animate.css

Animate.css 是一个动画效果库,它提供了多种简单易用的CSS动画效果。

2.1 Animate.css 基本使用

2.1.1 安装

npminstallanimate.css--save

或者

yarn add animate.css

2.1.2 在vue3中基本使用方式

<template><h1class="animate__animated animate__bounce ">一段跳动的动画文字。</h1></template><scriptlang="ts">import'animate.css';
import { defineComponent, } from'vue';
exportdefaultdefineComponent({})
</script>

2.1.3 动画时间的控制

2.1.3.1 使用预定义延时类

Animate.css 提供了延时类,因此我们也可以直接在元素的 class 属性上添加延迟:

类名 默认延迟时间
animate__delay-2s 2s
animate__delay-3s 3s
animate__delay-4s 4s
animate__delay-5s 5s

Animate.css 使用自定义属性(也称为 CSS 变量)来定义动画的持续时间、延迟和迭代。这使得 Animate.css 非常灵活和可定制。需要更改动画持续时间时,只需在全局或本地设置一个新值:

  • 这只会改变这个特定的动画持续时间:
<stylelang="scss"scoped>.animate__animated.animate__bounce {
--animate-duration: 2s;
}
</style>
  • 这将全局更改所有动画:
<stylelang="scss"scoped>:root {
--animate-duration: 800ms;
--animate-delay: 0.9s;
}
</style>

2.1.3.2 使用 keyframes 中的animation-duration

尽管该库提供了一些帮助类,例如animated让您快速运行的类,但您可以直接使用提供的动画keyframes。

<template><h1class="my-element">一段跳动的动画文字。</h1></template><scriptlang="ts">import'animate.css';
import { defineComponent, } from'vue';
exportdefaultdefineComponent({})
</script><stylescropd>.my-element {
display: inline-block;
margin: 00.5rem;
animation: bounce;      /* 直接引用动画的 @keyframe 声明 */animation-duration: 2s; /* 别忘了设置时长! */}
</style>

2.1.3.3 使用JavaScript控制延时

自定义属性还可以轻松地动态更改所有动画的时间受限属性。这意味着您可以使用 javascript one-liner 获得慢动作或延时效果:

  • 所有动画将花费两倍的时间来完成:
document.documentElement.style.setProperty('--animate-duration', '2s');
  • 所有动画将花费一半的时间来完成:
document.documentElement.style.setProperty('--animate-duration', '.5s');

当写在VUE中,你不应该写在 setup 中,因为这是在构建组件前的配置。通常你可以根据需要在以下钩子中使用:

  • beforeCreate(在实例初始化之后、进行数据侦听和事件/侦听器的配置之前);
  • created(在实例创建完成后);
  • mounted(在实例挂载完成后) ;

比如在一个组件中完整看起来是这样写:

<template><h1class="animate__animated animate__bounce ">一段跳动的动画文字。</h1></template><scriptlang="ts">import { defineComponent } from'vue';
import'animate.css';
exportdefaultdefineComponent({
beforeMount(){
// 所有动画将花费两倍的时间来完成document.documentElement.style.setProperty('--animate-duration', '.1s');
  }
});
</script>

2.1.4 动画的重复

Animate.css 提供了重复类,因此我们也可以直接在元素的 class 属性上添加重复:

类名 默认延迟时间
animate__repeat-1 1
animate__repeat-2 2
animate__repeat-3 3
animate__infinite infinite

例如:

<!-- 重复2次 --><divclass="animate__animated animate__bounce animate__repeat-2">Example</div>

2.2 Animate.css 的动画(CSS)类名

2.2.1 引起关注(Attention seekers)

类名 描述 说明
animate__bounce 弹跳 重复几次的上下跳动的动画效果
animate__flash 闪光 重复几次的隐藏又显示的动画效果
animate__pulse 脉冲 一次稍微变大又缩小会原来尺寸的效果
animate__rubberBand 橡皮筋 像同时往左右拉伸橡皮经一样的动画
animate__shakeX X轴摇晃 反复左右平移几次
animate__shakeY Y轴摇晃 反复上下平移几次
animate__headShake 摇头 轻轻地左右平移几次,就像摇头
animate__swing 摇摆 绕着上方一个点按弧形摇摆
animate__tada - 略微缩小同时逆时针旋转一个小角度后还原,然后绕中心轻微摇摆几次
animate__wobble 摇晃 大幅度大半径按下方圆心的圆弧轨迹摇晃
animate__jello 果冻 就像果冻落地一小段时间内的形变过程动画
animate__heartBeat 心跳 几次放大放小的动画,就像心跳一样

2.2.2 后入(Back entrances)

类名 描述 说明
animate__backInDown 向下后入 从上掉下的进入动画
animate__backInLeft 从左后入 从左向右的进入动画
animate__backInRight 从右后入 从右向左的进入动画
animate__backInUp 向上后入 从下向上的进入动画

2.2.3 后出(Back exits)

类名 描述 说明
animate__backOutDown 向下后出 从上掉下的移出动画
animate__backOutLeft 向左后出 从原地退后向右的移出动画
animate__backOutRight 向右后出 从原地退后右向左的移出动画
animate__backOutUp 向上后出 从原地退后向上的移出动画

2.2.4 弹入(Bouncing entrances)

类名 描述 说明
animate__bounceIn 弹入 从原地弹入动画
animate__bounceInDown 弹入 从上向下弹入动画
animate__bounceInLeft 弹入 从左向右弹入动画
animate__bounceInUp 弹入 从右向左弹入动画

2.2.5 弹出(Bouncing exits)

类名 描述 说明
animate__bounceOut - 略微缩小后向内移出
animate__bounceOutDown - 略微缩小后向下移出
animate__bounceOutLeft - 略微缩小后向左移出
animate__bounceOutRight - 略微缩小后向右移出
animate__bounceOutUp - 略微缩小后向上移出

2.2.6 淡入(Fading entrances)

类名 描述 说明
animate__fadeIn 渐显 淡入,即逐渐显示
animate__fadeInDown 渐显-下 从上向下淡入
animate__fadeInDownBig 渐显-下&大 从上向下淡入,更大的动画幅度
animate__fadeInLeft 渐显-左 从左向右淡入
animate__fadeInLeftBig 渐显-左&大 从左向右淡入,更大的动画幅度
animate__fadeInRight 渐显-右
animate__fadeInRightBig 渐显-右&大 更大的动画幅度
animate__fadeInUp 渐显-上 更大的动画幅度
animate__fadeInUpBig 渐显-上&大
animate__fadeInTopLeft 渐显-左上
animate__fadeInTopRight 渐显-左上&大 更大的动画幅度
animate__fadeInBottomLeft 渐显-左下
animate__fadeInBottomRight 渐显-左&大 更大的动画幅度

2.2.7 淡出(Fading exits)

类名 描述 说明
animate__fadeOut 淡出 变淡找到消失
animate__fadeOutDown 下淡出 由上向下淡出
animate__fadeOutDownBig 下淡出-大 由上向下淡出,动作幅度更大
animate__fadeOutLeft 左淡出 从左向右淡出
animate__fadeOutLeftBig 左淡出-大 从左向右淡出,动作幅度更大
animate__fadeOutRight 右淡出 从右向左淡出
animate__fadeOutRightBig 右淡出-大 从右向左淡出,动作幅度更大
animate__fadeOutUp 上淡出 由下向上淡出
animate__fadeOutUpBig 上淡出-大 由下向上淡出,动作幅度更大
animate__fadeOutTopLeft 左上方淡出 -
animate__fadeOutTopRight 右上方淡出 -
animate__fadeOutBottomRight 左下方淡出 -
animate__fadeOutBottomLeft 右下方淡出 -

2.2.8 后空翻(Flippers)

类名 描述 说明
animate__flip 后空翻 (为默认的Y轴)
animate__flipInX 绕X轴后空翻 以元素横中轴线上下翻动
animate__flipInY 绕Y轴后空翻 以元素纵中轴线上下翻动
animate__flipOutX 绕X轴后空翻 animate__flipInX旋转方向相反
animate__flipOutY 绕Y轴后空翻 animate__flipInY旋转方向相反

2.2.9 光速(Lightspeed)

类名 描述 说明
animate__lightSpeedInRight - 从右向左进入
animate__lightSpeedInLeft - 从左向右进入
animate__lightSpeedOutRight - 向右移出
animate__lightSpeedOutLeft - 向左移出

2.2.10 旋转进入(Rotating entrances)

类名 描述 说明
animate__rotateIn 旋转进入 (逆时针)
animate__rotateInDownLeft - 从零点处顺时针90°旋转进入
animate__rotateInDownRight - 从零点处逆时针90°旋转进入
animate__rotateInUpLeft - 从6点处逆时针90°旋转进入
animate__rotateInUpRight - 从6点处顺时针90°旋转进入

2.2.11 旋转退出(Rotating exits)

类名 描述 说明
animate__rotateOut 旋转退出 (顺时针)
animate__rotateOutDownLeft - 3点向6点顺时针旋转退出
animate__rotateOutDownRight - 9点向6点逆时针旋转退出
animate__rotateOutUpLeft - 3点向12点逆时针旋转退出
animate__rotateOutUpRight - 9点向12点顺时针旋转退出

2.2.12 缩放进入(Zooming entrances)

类名 描述 说明
animate__zoomIn - 由中心点方法进入
animate__zoomInDown - 由上方一个小点放大掉入
animate__zoomInLeft - 从左向右放大进入
animate__zoomInRight - 从右向左放大进入
animate__zoomInUp - 从下向上放大进入

2.2.13 缩放退出(Zooming exits)

类名 描述 说明
animate__zoomOut - 向中心一点缩小退出
animate__zoomOutDown - 缩小到一定尺寸后,向下退出
animate__zoomOutLeft - 缩小到一定尺寸后,向左退出
animate__zoomOutRight - 缩小到一定尺寸后,向右退出
animate__zoomOutUp - 缩小到一定尺寸后,向上退出

2.2.14 滑入(Sliding entrances)

类名 描述 说明
animate__slideInDown 下滑入 向下滑入
animate__slideInLeft 左滑入 从左滑入
animate__slideInRight 右滑入 从右滑入
animate__slideInUp 上滑入 向上滑入

2.2.15 滑出(Sliding exits)

类名 描述 说明
animate__slideOutDown 下滑出 向下滑出
animate__slideOutLeft 左滑出 从左滑出
animate__slideOutRight 右滑出 从右滑出
animate__slideOutUp 上滑出 向上滑出

2.2.16 特殊动画(Specials)

类名 描述 说明
animate__hinge - 左侧端点为圆心挂住,右侧绕圆弧下垂,最后整体落体
animate__jackInTheBox - 一种旋转进入的效果
animate__rollIn - 一种大幅度从左侧翻滚进入的效果
animate__rollOut - 一种大幅度向右侧翻滚退出的效果

2.3 与vue内置组件 Transition 一起使用

在上文中我们介绍过 自定义 Transition 类,这也是使用的一种简单方法:

<template><transitionname="custom-classes"enter-active-class="animate__animated animate__tada"leave-active-class="animate__animated animate__bounceOutRight"><pv-if="show">hello</p></transition></template><scriptlang="ts">import { defineComponent, ref } from'vue';
import'animate.css';
exportdefaultdefineComponent({});
</script>

实际上,为了实现动画效果,有些情况下 Transition 不是必须的。比如在使用 VUERouter时,可以直接将动画CSS绑定到router-view上,如:

<router-view:class="{'jcadmin-childPage':true,'animate__animated': true,'animate__zoomInDown': true,'animate__zoomOutDown': false,}"></router-view>

但是这要求当路由变化时,路由渲染了不同的组件。在某些情况下我们可能传入了不同路由相同组件,这种做法比较特殊,因为在VueRouter中的不同路由传入相同的组件作为视图时,他们将获得相同的scopID(用于渲染只属于当前组件的样式)、hmrID(用于热模块重载)等等,不会被VUE视作不同模块,因此可能通过props传入特定参数来最终显示不同的视图。

目录
相关文章
|
1天前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构,还集成了常用的开发工具和配置,使得开发者可以专注于业务逻辑的实现,而不需要花费大量时间在项目配置上。
54 7
使用 Vue CLI 脚手架生成 Vue 项目
|
2天前
|
JavaScript 算法
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
8 1
|
2天前
|
JavaScript
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
6 1
|
2天前
|
JavaScript
vue知识点
vue知识点
10 3
|
4天前
|
JavaScript 前端开发 Java
【vue实战项目】通用管理系统:作业列表
【vue实战项目】通用管理系统:作业列表
16 0
|
10天前
|
JavaScript 前端开发 开发者
vue3+ts配置跨域报错问题解决:> newpro2@0.1.0 serve > vue-cli-service serve ERROR Invalid options in vue.
【6月更文挑战第3天】在 Vue CLI 项目中遇到 &quot;ERROR Invalid options in vue.config.js: ‘server’ is not allowed&quot; 错误是因为尝试在 `vue.config.js` 中使用不被支持的 `server` 选项。正确配置开发服务器(如代理)应使用 `devServer` 对象,例如设置代理到 `http://xxx.com/`: ```javascript module.exports = { devServer: {
24 1
|
4天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
21 2
|
4天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息录入
【vue实战项目】通用管理系统:信息列表,信息录入
13 3
|
4天前
|
JavaScript 前端开发 API
【vue实战项目】通用管理系统:学生列表
【vue实战项目】通用管理系统:学生列表
18 2
|
4天前
|
缓存 JavaScript
【vue实战项目】通用管理系统:首页
【vue实战项目】通用管理系统:首页
13 2