web0331/11.vue3/vue-router/src/views/List.vue

<template>
  <div>
    列表
    <ul>
        <li v-for="(item,index) in newList" :key="item.id">
            <RouterLink :to='`/list/demo${index + 1}`' active-class="active" >{{ item.shopName }}</RouterLink>
        </li>
    </ul>
    <div class="main">
        <RouterView></RouterView>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref,reactive} from "vue" 
import { RouterLink,RouterView } from "vue-router";
let newList = reactive([
    {
        id:1,
        shopName: '男装'
    },
    {
        id:2,
        shopName: '女装'
    },
])
</script>

<style lang="scss" scoped>
.active {
    color: red !important;
}
</style>