book-web/src/views/book/index.vue

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

const router = useRouter()
// 记录切换值
const changeValue = ref('/book/index')

const changeRouters = () => {
	if (changeValue.value == '/book/my') {
		changeValue.value = '/book/index'
	} else if (changeValue.value == '/book/index') {
		changeValue.value = '/book/my'
	}
	router.push(changeValue.value)
}
</script>

<template>
	<div class="bg-color">
		<div class="nav-link">
			<div class="site-nav-bd">
				<ul>
					<li @click="router.push('/book/login?returnUrl=/book/index&status=0')">亲，请登录</li>
					<li @click="router.push('/book/login?returnUrl=/book/index&status=1')">免费注册</li>
				</ul>
				<ul>
					<li @click="changeRouters">{{ changeValue == '/book/my' ? '商城首页' : '我的淘宝' }}</li>
					<li @click="router.push('/book/trolley')">
						<el-icon>
							<ShoppingCart />
						</el-icon>
						购物车
					</li>
					<li @click="router.push('/book/collection')">
						<el-icon>
							<Collection />
						</el-icon>
						收藏夹
					</li>
					<li @click="router.push('/login')">
						<el-icon><Setting /></el-icon>书城管理后台
					</li>
				</ul>
			</div>
		</div>
		<router-view></router-view>
	</div>
</template>

<style scoped lang="scss">
.nav-link {
	background-color: #f5f5f5;
	border-bottom: 1px solid #eee;
	width: 100%;
	height: 35px;
	top: 0;
	left: 0;
	z-index: 10000;

	.site-nav-bd {
		margin: 0 auto;
		width: 1190px;
		height: 35px;
		background: #f5f5f5;
		display: flex;
		justify-content: space-between;

		ul {
			display: flex;
		}

		ul li {
			list-style-type: none;
			height: 35px;
			margin-right: 15px;
			display: flex;
			align-items: center;
		}

		li:hover {
			color: #ff4400;
			cursor: pointer;
		}
	}
}

.bg-color {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #f5f8fa;
	overflow-y: scroll;
}
</style>