Dbqb_Study/吴光慧学习笔记/11.5/备份/News.txt

<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>