<template>
    <div class="home-container">
        <h3>homt页面</h3>
        <!-- 声明式导航 -->
        <!-- <router-link :to="{name:'movie1',params:{id:1}}">跳转到电影1页面</router-link> -->
        <!-- 编程式导航 -->
        <a href="#" @click.prevent="goto(2)">跳转到电影1页面</a>
        <!-- .prevent：阻止默认行为 -->
        <br>
        <a href="#" @click.prevent="gotoTab1">跳转到tab1页面</a>
        <br>
        <a href="#" @click.prevent="gotoTab2(2)">跳转到tab2页面</a>
    </div>
</template>

<script setup>
    import {useRouter} from 'vue-router'
    const router = useRouter()
    const goto = (mid) => {
        router.push({
            name:'movie1',
            params:{id:mid}
        })
    }

    const gotoTab1 = () => {
        router.push('/about/tab1')
    }

    const gotoTab2 = (tabId) => {
        router.push({
            path:`/about/tab${tabId}`
        })
    }
</script>

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

    }
</style>