web0715/15.vue3/vue-project/src/App.vue

<template>
  <div class='app'>
    <div class="nav">
      <RouterLink push active-class='active' to='/home'>首页</RouterLink>
      <RouterLink push active-class='active' to='/list'>列表</RouterLink>
      <RouterLink push active-class='active' :to='{
        name:"wode"
      }'>我的</RouterLink>
    </div>
    <div class="main">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script setup lang='ts' name='app'>
import { ref, reactive} from 'vue'
import {RouterLink,RouterView} from 'vue-router'
</script>
<style lang='scss' scoped>
.app {
  padding:20px 15px;
  a {
    color: #000;
    font-size: 27px;
    text-decoration: none;    
  }
  .active {
    color: red;
  }
  .nav {
    width:90%;
    height: 70px;
    background: #eee;
    border: 1px solid #ccc;
    border-radius:8px;
    padding:10px 15px;
    display: flex;
    align-items: center;
    // algin-item: center;
    justify-content: space-around;
  }
}
</style>