You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
1.4 KiB
61 lines
1.4 KiB
<template>
|
|
<div class="news">
|
|
<!--导航区-->
|
|
<ul>
|
|
<li v-for="news in newsList" :key="news.id">
|
|
<!--第一种写法-->
|
|
<!-- <RouterLink :to="`/news/detail?id=${news.id}
|
|
&title=${news.title}
|
|
&content=${news.content}`">{{news.title}}</RouterLink> -->
|
|
|
|
<!-- 第二种写法 -->
|
|
<RouterLink
|
|
:to="{
|
|
path: '/news/detail',
|
|
query: {
|
|
id: news.id,
|
|
title: news.title,
|
|
content: news.content}}">
|
|
{{news.title}}
|
|
</RouterLink>
|
|
</li>
|
|
</ul>
|
|
<!--内容区-->
|
|
<div class="news-content">
|
|
<RouterView></RouterView>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup name="News">
|
|
import { reactive } from 'vue';
|
|
import { RouterLink, RouterView } from 'vue-router';
|
|
|
|
const newsList = reactive([
|
|
{id: 1, title: '新闻1',content: '新闻1的内容'},
|
|
{id: 2, title: '新闻2',content: '新闻2的内容'},
|
|
{id: 3, title: '新闻3',content: '新闻3的内容'},
|
|
{id: 4, title: '新闻4',content: '新闻4的内容'},
|
|
])
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.news {
|
|
padding: 0 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 100px;
|
|
}
|
|
.news ul {
|
|
margin-top: 30px;
|
|
/* list-style: none; */
|
|
padding-left: 10px;
|
|
}
|
|
.news li>a{
|
|
text-decoration: none;
|
|
color: #000;
|
|
}
|
|
</style>
|