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>