使用unplugin-vue-router时/hi/asd/other未匹配other.vue的问题

你的问题核心在于嵌套路由的渲染机制和文件系统路由的结构逻辑：

1. 路由结构解析规则
   根据unplugin-vue-router的文件系统路由规则，你的文件夹结构会生成以下路由：

   • /hi/:name → 对应src/pages/hi/[name].vue（父路由）
   • /hi/:name/other → 对应src/pages/hi/[name]/other.vue（父路由的子路由）

2. 视图匹配异常的原因
   当访问/hi/asd/other时，路由实际上已经匹配到了/hi/:name/other，但你看到的是[name].vue的内容，问题出在父路由组件没有挂载子路由的入口：

   • 子路由的组件需要通过父路由组件中的<router-view>标签来渲染，如果[name].vue里没有添加这个标签，子组件other.vue就没有地方挂载，页面只会显示父组件的内容，导致你误以为匹配到了父路由。

3. 解决方法
   在src/pages/hi/[name].vue中添加<router-view>标签，比如：

   <template>
     <div>
       <!-- 父组件内容 -->
       <h1>Hi {{ $route.params.name }}</h1>
       <!-- 子路由挂载位置 -->
       <router-view />
     </div>
   </template>
   

   这样访问/hi/asd/other时，就会同时渲染父组件和子组件的内容。

如果你的需求是让/hi/asd/other成为一个独立路由（不依赖父路由），可以调整文件夹结构，比如把other.vue移到hi文件夹下并命名为[name]-other.vue，或者调整为src/pages/hi/other/[name].vue，这样生成的路由就是/hi/other/:name，和/hi/:name完全独立。

内容的提问来源于stack exchange，提问作者Benjámin Gerván