033、Vue3+TypeScript基础，路由传参时候把层级脱掉

01、Datail.vue代码如下：

<template>
  <ul class="news-list">
    <li>编号：{{ route.query.id }}</li>
    <li>编号：{{ route.query.title }}</li>
    <li>编号：{{ route.query.content }}</li>
  </ul>
</template>

<script setup lang="ts" name="home">
import {useRoute} from 'vue-router'

let route = useRoute()

</script>

<style scoped>
.news-list {
  /* 添加边框样式 */
  border: 2px solid #000; /* 边框宽度、样式和颜色 */
  border-radius: 5px; /* 可选：添加边框圆角 */
  padding: 20px; /* 可选：给内部内容添加一些内边距 */
  margin: 20px; /* 可选：给元素添加一些外边距，以便与其他元素隔开 */
}
</style>

02、DetailNew.vue代码如下：

<template>
  <ul class="news-list">
    <li>编号：{{ query.id }}</li>
    <li>编号：{{ query.title }}</li>
    <li>编号：{{ query.content }}</li>
  </ul>
</template>

<script setup lang="ts" name="home">
import {toRefs} from 'vue'
import {useRoute} from 'vue-router'

let route = useRoute()

// 从路由中获取参数，使用toRefs变成响应式数据
let {query} = toRefs(route)

</script>

<style scoped>
.news-list {
  /* 添加边框样式 */
  border: 2px solid #000; /* 边框宽度、样式和颜色 */
  border-radius: 5px; /* 可选：添加边框圆角 */
  padding: 20px; /* 可选：给内部内容添加一些内边距 */
  margin: 20px; /* 可选：给元素添加一些外边距，以便与其他元素隔开 */
}
</style>

03、效果如下：