<template>
  <div class="movie-container">
    <h3>电影页面</h3>
    <!-- <hr style="width:200px"> -->
    <router-link :to="{name:'movie1',params:{id:1}}">电影1</router-link>
    <router-link to="/movie/2">电影2</router-link>
    <router-link to="/movie/3">电影3</router-link>
    <router-view></router-view>
  </div>
</template>

<script setup>

</script>

<style scoped>
     .movie-container{
        min-height: 150px;
        background-color: #F2F2F2;
        padding:15px;

    }
    .movie-container a{
        padding: 5px;
        color:#5c5050;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin: 0 5px;
    }
    .movie-container a.router-link-active{
        color: #fff;
        background-color: #000;
    }
</style>