<template> <div class="list"> <ul> <li v-for="(item,index) in gameList" :key="index"> <!-- query传参 --> <!-- 第一种 --> <!-- <RouterLink :to="`/list/detail?id=${item.id}&name=${item.name}&user=${item.user}&password=${item.password}`" active-class="active">{{ item.name }}</RouterLink> --> <!-- 第二种 --> <!-- <RouterLink :to="{ name:'details', query:{ id:item.id, name:item.name, user:item.user, password:item.password } }">{{ item.name }}</RouterLink> --> </li> <!-- <li><RouterLink active-class="active" to="/list/detail">愤怒的小鸟</RouterLink></li> <li><RouterLink active-class="active" to="/list/detail">植物大战僵尸</RouterLink></li> <li><RouterLink active-class="active" to="/list/detail">超级马里奥</RouterLink></li> <li><RouterLink active-class="active" to="/list/detail">黄金矿工</RouterLink></li> <li><RouterLink active-class="active" to="/list/detail">森林冰火人</RouterLink></li> <li><RouterLink active-class="active" to="/list/detail">赛尔号</RouterLink></li> --> </ul> <div class="main"> <RouterView></RouterView> <!-- <Detail/> --> </div> </div> </template> <script lang="ts" setup name="List"> import {RouterView,RouterLink} from 'vue-router' // import Detail from './Detail.vue' let gameList = [ {id:1,name:'愤怒的小鸟',user:"小艾",password:"123456"}, {id:1,name:'植物大战僵尸',user:"小赵",password:"999999"}, {id:1,name:'超级马里奥',user:"小玉",password:"888888"}, {id:1,name:'黄金矿工',user:"小段",password:"999999"}, {id:1,name:'森林冰火人',user:"小郑",password:"000000"}, {id:1,name:'赛尔号',user:"小马",password:"666666"}, ] </script> <style scoped> * { text-decoration: none; } .list { overflow: hidden; } .list ul { float: left; list-style: none; } li { width: 200px; text-align: center; padding: 20px; border: 1px solid #ccc; } .main { width: 1500px; height: 500px; margin-left: 30px; margin-top: 40px; border:1px solid #f00; float: left; } .active { color:#f00; } </style>