vue3_ts之页面布局

最新推荐文章于 2025-04-23 18:16:23 发布

goto_w

最新推荐文章于 2025-04-23 18:16:23 发布

阅读量387

点赞数

分类专栏： vue ts 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_52696618/article/details/128896453

版权

vue 同时被 2 个专栏收录

26 篇文章

订阅专栏

9 篇文章

订阅专栏

app.vue

布局结构为上下结构，使用两个 RouterView 组件，结合RouterView 的命名视图来实现
为两个RouterView 组件设置不同的类名，在app中设置结构样式

<script setup lang="ts">
import { RouterView } from 'vue-router'
</script>

<template>
  <transition>
    <RouterView class="box" />
  </transition>
  <RouterView class="footer" name="footer" />
</template>

<style lang="scss">
html,
body,
#app {
  height: 100%;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  width: 100%;
  max-width: 768px;
  min-width: 350px; /*no*/
  margin: 0 auto;
  color: #2c3e50;
  display: flex;
  flex-direction: column;
  .box {
    flex: 1;
    background: #f6f6f6;
    overflow: auto;
  }
  .footer {
    height: 100px;
  }

  .v-enter-active {
    animation: move 1s;
  }
  @keyframes move {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(0%);
    }
  }
}
</style>

查看命名视图的实现，以一个route为例

// 不定义name属性，默认为name = "default"
<RouterView class="box" />
// 添加了name属性，对应展示路由对象的components属性中相同key名对应的组件，
<RouterView class="footer" name="footer" />

{
    path: '/',
    name: 'home',
    components: {
      default: HomeView,
      footer: CommonFooter
    }
},