版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/i042416/article/details/88749571
<template>
<div id="app" ref="bodyPage">
<transition name="fade" mode="out-in">
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
</div>
</template>
<transition name="fade">
运动东西(元素,属性、路由....)
</transition>
是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 相似, 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。
比如url: /a/b/c (假设a、b、c都为正常路径,不会作为参数)
那/a对应的就是App.vue中的router-view,/a进入a.vue中
那/a/b对应的就是a.vue中的router-view, /a/b进入b.vue中
Script:
<script>
export default{
name:'app',
data:function(){
return{
clientHeight:''
}
},
mounted:function(){
this.clientHeight = `${document.documentElement.clientHeight}`
this.$refs.bodyPage.style.height = this.clientHeight + 'px'
// window.console.log("body totle height: "+this.clientHeight+'px')
},
}
</script>
Style:
<style>
html,body{
padding: 0px;
margin: 0px;
height: 100%;
width: 100%;
/*overflow: hidden;*/
}
</style>