今天我们封装一个Vue3的通栏组件,实现登录后(有token)和没有登录(没有token) 的动态展示
没有登录的效果图
登录以后的效果图:
<template>
<nav class="app-topnav">
<div class="container">
<ul>
<template v-if="$store.state.user.profile.token">
<li>
<a href="javascript:;"><i class="iconfont icon-user"></i>{{ $store.state.user.profile.account }}</a>
</li>
<li><a href="javascript:;">退出登录</a></li>
</template>
<template v-else>
<li><a href="javascript:;">请先登录</a></li>
<li><a href="javascript:;">免费注册</a></li>
</template>
<li><a href="javascript:;">我的订单</a></li>
<li><a href="javascript:;">会员中心</a></li>
<li><a href="javascript:;">帮助中心</a></li>
<li><a href="javascript:;">关于我们</a></li>
<li>
<a href="javascript:;"><i class="iconfont icon-phone"></i>手机版</a>
</li>
</ul>
</div>
</nav>
</template>
<script>
export default {
name: 'TopNav'
}
</script>
<style scoped lang="less">
.app-topnav {
background: #333;
ul {
display: flex;
justify-content: flex-end;
align-items: center;
height: 53px;
li {
a {
display: inline-block;
line-height: 1;
padding: 0 15px;
color: #cdcdcd;
i {
font-size: 14px;
margin-right: 2px;
}
&:hover {
color: @xtxColor;
}
}
~ li {
a {
border-left: 2px solid #666;
}
}
}
}
}
</style>
注:这里的token是保存在vuex中