Vue3嵌套导航相对路径问题

有如下的页面设计，页面上方第一次导航，两个菜单，首页和新闻
点击新闻，内容里面嵌套一个左侧和右侧，左侧有4条新闻，点击某一条新闻，右侧显示详情

代码如下：

​
File Path: d:\hello\src\App.vue
<template><div id="app"><nav><router-link to="/">Home</router-link><router-link to="/news">News</router-link></nav><router-view></router-view> <!-- 用于渲染当前路由匹配的组件 --></div>
</template><script lang="ts">
export default {name: 'App'
};
</script><style>
nav {display: flex;justify-content: center;margin-bottom: 20px;
}nav a {margin: 0 15px;text-decoration: none;color: #42b983;
}
</style>File Path: d:\hello\src\views\NewsDetail.vue
<template><div><h2>News Detail {{ id }}</h2><p>This is the detail of the news with ID: {{ id }}</p></div>
</template><script lang="ts">
import { defineComponent, computed, onMounted } from 'vue'; // 确保只导入一次
import { useRoute } from 'vue-router';export default defineComponent({name: 'NewsDetail',setup() {const route = useRoute();const id = computed(() => route.params.id);// 在组件挂载时打印 IDonMounted(() => {console.log('Entered NewsDetail with ID:', route.params.id);});return { id };}
});
</script>File Path: d:\hello\src\router\index.ts
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/HomeView.vue'; // 确保路径正确
import News from '../views/News.vue'; // 确保路径正确
import NewsDetail from '../views/NewsDetail.vue'; // 确保路径正确const routes = [{path: '/',name: 'Home',component: Home},{path: '/news',name: 'News',component: News,children: [{path: 'detail/:id', // 使用动态参数name: 'NewsDetail',component: NewsDetail}]}
];const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes
});export default router;File Path: d:\hello\src\views\News.vue
<template><div><h1>News</h1><ul><li><router-link to="detail/1">News Detail 1</router-link></li><li><router-link to="news/detail/2">News Detail 2</router-link></li><a href="detail/1">a标签 news 3</a></ul><router-view></router-view> <!-- 用于渲染子路由的内容 --></div>
</template><script lang="ts">
export default {name: 'News',mounted() {console.log(this.$route.path); // 这里可以访问当前路径}
};
</script>File Path: d:\hello\src\main.ts
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';const app = createApp(App);app.use(router);app.mount('#app');File Path: d:\hello\src\views\HomeView.vue
<template><div><h1>Welcome to the Home Page</h1><p>This is the home page content.</p></div>
</template><script lang="ts">
export default {name: 'HomeView'
};
</script>File Path: d:\hello\src\views\AboutView.vue
<template><div class="about"><h1>This is an about page</h1></div>
</template><style>
@media (min-width: 1024px) {.about {min-height: 100vh;display: flex;align-items: center;}
}
</style>​

首先点击 首页，然后点击新闻,当前的网址是：
http://localhost:5173/news
然后点击News detail 1,发现网址变成了：
http://localhost:5173/detail/1

 并且页面空白了，因为没有找到路由/detail
为什么会跳转到 http://localhost:5173/detail/1 而不是 http://localhost:5173/news/detail/1,这里不是写的相对路径吗？
可以参考下面的a标签，也是这样跳转的，个人觉得在当前路径是http://localhost:5173/news的时候，访问相对路径detail,就相当于一个文件夹是http://localhost:5173/，news相当于news.html,而detail和他是同级的，所以相对路径会解析为http://localhost:5173/detail
而路由中，detail和news不是同级关系
如果要写相对路径，也只能写成

to="news/detail/1"

即使写成./detail/1也不行 
这里是讨论相对路径的问题，当然，写成下面也是可以的

:to="{ name: 'NewsDetail', params: { id: 1 } }"