上一次我们进行了一点简单的页面美化，这次我们要对菜单栏进行一定的美化，让其拥有丰富的动画效果。
计算属性
首先我们需要实现一个功能：当页面切换时，对应的按钮高亮显示。
<template>
<div id="menu">
<button data-to = "/" @click="routerTo" class="barButton active">主页</button>
<button data-to = "/login" @click="routerTo"
v-if="!userAccountStore.isLogged" class="barButton">登录</button>
<button data-to ="/register" @click="routerTo"
v-if="!userAccountStore.isLogged" class="barButton">注册</button>
<button data-to="/articleEditor" @click="routerTo" class="barButton" >创作中心</button>
<button v-if="userAccountStore.isLogged"
@click="userAccountStore.logout" class="barButton">退出登录</button>
</div>
</template>
function routerTo(event){
const button = event.target;
const buttons = document.getElementsByClassName('barButton');
for(let i of buttons){
i.classList.remove('active');
}
button.classList.add('active');
router.push(button.dataset.to);
}
虽然能够达到我们想要的效果，但是并没有很mvvm，毕竟你使用了代码直接修改元素的css，这是不符合我们的设计模式的。因此这里可以使用计算属性来达到我们的目的。在Vue组合式中的计算属性，是一个函数，传入一个箭头函数，可以作为一个计算好的属性参与到页面渲染中。只要在箭头函数的返回值函数中规定了参数，我们便可以在计算属性中传参了。
<script setup>
const currentPage=ref('/');
function routerTo(path){
router.push(path);
currentPage.value = path;
}
const buttonClass = computed(()=>{
return function(id){
if(id === currentPage.value){
return 'active';
}else{
return '';
}
}
})
</script>
<template>
<div id="menu">
<button @click="routerTo('/')"
:class="buttonClass('/')">主页</button>
<button @click="routerTo('/login')"
v-if="!userAccountStore.isLogged"
:class="buttonClass('/login')">登录</button>
<button @click="routerTo('/register')"
v-if="!userAccountStore.isLogged"
:class="buttonClass('/register')">注册</button>
<button @click="routerTo('/articleEditor')"
:class="buttonClass('/articleEditor')">创作中心</button>
<button v-if="userAccountStore.isLogged"
@click="userAccountStore.logout">退出登录</button>
</div>
</template>
<style scoped>
#menu{
height: 10vh;
width: 99vw;
}
button{
margin-left: 5vw;
margin-right: 5vw;
margin-top: 1vh;
height: 8vh;
width: 10vw;
}
button:hover{
background-color: aqua;
}
.active{
background-color: chartreuse;
}
</style>
文章卡片与配色设计
初步做完导航栏之后，我们需要给文章卡片进行设计，不然目前在页面上显示的便是一个透明的框，实在是很难看。只需要添加一个阴影就可以了（别忘了当鼠标扫到卡片的时候改变鼠标指针的样式，不然用户是不知道这里是可以点击的）。
#informationShow{
display: flex;
flex-direction: column;
width: 40vw;
height: 15vh;
box-shadow: 2px 2px 5px gray;
border-radius: 5px;
}
#informationShow:hover{
cursor: pointer;
}
现在文章卡片就可以明显的被看到了。但是作为扁平化的博客来说，我们不需要阴影。因此通过配色的调整，可以让我们的文章卡片变得更加的明显。
#informationShow{
display: flex;
flex-direction: column;
width: 40vw;
height: 15vh;
box-shadow: 2px 2px 5px gray;
border-radius: 5px;
background-color: #f9f7f0;;
}
#informationShow:hover{
cursor: pointer;
}
菜单颜色和背景颜色分别使用的是#b0daff和#daf5ff。
我们会发现，即使元素的margin和padding都设置为0，左上角还是有空隙。这是因为body自动会有8px的margin，因此可以在index.html中给body设定margin和padding即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
<style>
body{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
css动画
现在使用button的话页面实在是太丑了，因此我们需要进行一下美化。首先就是把button改成ul和li，然后要把无序列表中代表某一项的圆点去掉（通过设置list-style-type属性为none），最后再给元素设置鼠标移动上去时的平滑效果即可。
css3中新增了动画效果的实现，这让我们不使用JavaScript就可以创建高性能的动画，因此鼠标移动时的平滑效果我们将使用css动画实现。
css动画分为两部分，动画配置以及动画内容，分别借助animations属性与@keyframes规则实现。其中动画配置包括动画延时、动画可触发次数、动画速度等。以下便是一个简单的动画示例。
li:hover{
animation-duration: 0.5s;
/* 动画时长 */
animation-name: pointerTo;
/* 动画名，即所触发的关键帧 */
animation-iteration-count: 1;
/* 鼠标指针扫上去时只触发一次 */
animation-fill-mode: forwards;
/* 播放完毕后保持最后一帧的状态 */
cursor: pointer;
}
@keyframes pointerTo{
from{
}
/* 初始状态，默认即可 */
to{
background-color: #FFF6BF;
}
/* 末状态 */
}
.active{
background-color: #FFF6BF;
}
最后给li元素添加圆角，再使文字保持居中，我们目前的导航栏就大功告成了捏。
li{
text-align: center;
/* 水平居中 */
border-radius: 5px;
list-style-type: none;
/* 去掉象征列表的圆点 */
margin-left: 5vw;
margin-right: 5vw;
margin-top: 1vh;
height: 5vh;
width: 10vw;
}