[Vue3]编程式路由导航——脱离＜RouterLink＞实现路由跳转

News.vue

<template>
    <div class="news"> 
        <ul>
            <li v-for="news in newsList" :key="news.id">

                <RouterLink
                    :to="{
                        path:'/news/detail',
                        query:{
                            id:news.id,
                            title:news.title,
                            content:news.content,
                        }
                    }"
                >
                    {{ news.title }}
                </RouterLink>

                <button @click="showDetail(news)">Detail</button>

            </li>
        </ul>

        <RouterView></RouterView>

    </div>
</template>

<script setup lang="ts" name="News">
    import {reactive} from 'vue'
    import {RouterLink, useRouter} from 'vue-router'

    const newsList = reactive(
        [
            {id:'1', title:'title1', content:'content1'},
            {id:'2', title:'title2', content:'content2'},
            {id:'3', title:'title3', content:'content3'}
        ]
    )
    
    // 接口-限制news
    interface NewsInter {
        id:string,
        title:string,
        content:string
    }

    const router = useRouter() // 负责整个应用路由管理的路由器

    function showDetail (news:NewsInter) {
        router.push({ // push类似于routerLink标签的to
            path:'/news/detail',
            query:{
                id:news.id,
                title:news.title,
                content:news.content
            }
        })
    }
</script>