VIP32/vue3/my-Router/query传参/1.vue

<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>