</header>
<main :class="`${cls}_main`">
<slot />
</main>
</div>
</template>
<script setup>
import { useRouter } from 'vue-router'
const cls = 'ui-layout-main'
const router = useRouter()
const props = defineProps({ title: String, hasBack: Boolean })
const goBack = () => router.back()
</script>
<style lang="less">
.ui-layout-main {
height: 100vh;
max-width: 768px;
margin: 0 auto;
display: flex;
flex-direction: column;
&_header {
height: 42px;
display: flex;
align-items: center;
background-color: #2196f3;
color: #fff;
padding: 0 15px;
}
&_title {
flex: 1;
text-align: center;
font-size: 16px;
letter-spacing: .1em;
}
&_btn-back {
cursor: pointer;
}
&_main {
flex: 1;
height: 0;
padding: .8em;
overflow-y: auto;
background-color: #e3f2fd;
}
}
</style>
然后，我们打开views文件夹下的Home.vue文件，替换为如下代码：
<template>
<ui-layout title="H5经典小游戏">
<div :class="cls">
<ul :class="`${cls}_games`">
<li v-for="(v, k) in gameMap" :key="k" :class="`${cls}_game-item`">
<router-link :to="{ name: 'game', params: { id: k } }">{{ v.name }}</router-link>
</li>
</ul>
</div>
</ui-layout>
</template>
<script setup>
import { gameMap } from '../components'
import UiLayout from '../layouts/Main.vue'
const cls = 'page-home'
</script>
<style lang="less">
.page-home {
&_games {
border-radius: 4px;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
}
&_game-item {
&:not(:last-child) {
border-bottom: 1px solid #dcdee2;
}
a {
display: block;
padding: 10px;
color: #515a6e;
transition: background-color .2s;
&:hover {
background-color: #f5f5f5;
}
}
}
}
</style>
然后，打开views文件夹下的Game.vue文件，替换为如下代码 。在Vue3中，component组件的is属性如果绑定的值为异步组件，则必须将异步组件加载器传入defineAsyncComponent函数，将defineAsyncComponent函数的返回值绑定到is属性，否则，直接绑定异步组件加载器的话，将什么都渲染不出来，而且还会抛出警告；在该路由组件中，我们通过路由参数id来渲染不同的游戏；
<template>
<ui-layout has-back :title="game && game.name">
<component v-if="game" :is="gameComponent" />
</ui-layout>
</template>
<script setup>
import { computed, defineAsyncComponent } from 'vue'
import { useRoute } from 'vue-router'
import { getGame } from '../components'
import UiLayout from '../layouts/Main.vue'
const route = useRoute()
const game = computed(() => getGame(route.params.id))
const gameComponent = computed(() => defineAsyncComponent(game.value.component))
</script>
感谢阅读！以上就是我们本篇文章的全部内容，这些代码是不是很简单呢？童鞋们阅读起来是不是很轻松？从下篇文章开始，我们将进入真正的游戏开发！以上我提到的10款游戏中，大家最期待先上哪款呢？
【开发网页游戏需要多少钱 怎么开发网页游戏】