</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>
然后，我們打開(kāi)views文件夾下的Home.vue文件，替換為如下代碼：
<template>
<ui-layout title="H5經(jīng)典小游戲">
<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>
然后，打開(kāi)views文件夾下的Game.vue文件，替換為如下代碼 。在Vue3中，component組件的is屬性如果綁定的值為異步組件，則必須將異步組件加載器傳入defineAsyncComponent函數(shù)，將defineAsyncComponent函數(shù)的返回值綁定到is屬性，否則，直接綁定異步組件加載器的話，將什么都渲染不出來(lái)，而且還會(huì)拋出警告；在該路由組件中，我們通過(guò)路由參數(shù)id來(lái)渲染不同的游戲；
<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>
感謝閱讀！以上就是我們本篇文章的全部?jī)?nèi)容，這些代碼是不是很簡(jiǎn)單呢？童鞋們閱讀起來(lái)是不是很輕松？從下篇文章開(kāi)始，我們將進(jìn)入真正的游戲開(kāi)發(fā)！以上我提到的10款游戲中，大家最期待先上哪款呢？
【開(kāi)發(fā)網(wǎng)頁(yè)游戲需要多少錢 怎么開(kāi)發(fā)網(wǎng)頁(yè)游戲】