router-view默认内容使用疑问：跳转User.vue后内容不显示求助

核心错误分析 #

• 路由配置逻辑错误：你将App.vue作为home路由的组件，但App.vue是项目根组件，路由系统应挂载到它内部的<router-view>中，而非把它作为路由组件本身，这会导致路由切换时渲染逻辑混乱。
• User.vue冗余代码干扰：User.vue中无需判断route.name === 'user'（路由匹配到user时才会渲染该组件），多余的<router-view>也会打乱渲染流程。
• App.vue默认内容判断冗余：router-view的默认内容仅在无匹配路由组件时显示，无需通过route.name判断，且home路由应对应独立组件，而非用默认内容替代。

修正后的代码 #

1. router.js（修正路由配置） #

import { createRouter, createWebHistory } from 'vue-router'
// 需新建src/components/Home.vue文件
import Home from '../components/Home.vue'

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: { isAccessed: true }
    },
    {
      path: '/:userName',
      name: 'user',
      component: () => import('../components/User.vue'),
      meta: { isAccessed: true }
    },
  ]
})

2. 新建Home.vue（迁移原App.vue中的input） #

<template>
  <input v-model="userName" @keyup.enter="jumpUserPage(userName)" type="text"/>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
let userName = ''

const jumpUserPage = (name) => {
  router.push({ name: 'user', params: { userName: name } })
}
</script>

3. App.vue（简化为根容器） #

<template>
  <div id="app">
    <h1>Hello App!</h1>
    <router-view></router-view>
  </div>
</template>

4. User.vue（移除冗余逻辑） #

<template>
  <div>
    <div>{{ $route.params.userName }}</div>
    <button @click="queryUserScore($route.params.userName)">Query Score</button>
  </div>
</template>

<script setup>
const queryUserScore = (userName) => {
  // 此处编写查询分数的业务逻辑
  console.log(`查询${userName}的分数`)
}
</script>

极简替代方案（无需新建Home组件） #

如果不想新增Home组件，可删除路由中/对应的home配置，让根路径直接显示router-view的默认input，访问/:userName时渲染User组件：

• 修改后的router.js：

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/:userName',
      name: 'user',
      component: () => import('../components/User.vue'),
      meta: { isAccessed: true }
    },
  ]
})

• 修改后的App.vue：

<template>
  <div id="app">
    <h1>Hello App!</h1>
    <router-view>
      <input v-model="userName" @keyup.enter="jumpUserPage(userName)" type="text"/>
    </router-view>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
let userName = ''

const jumpUserPage = (name) => {
  router.push({ name: 'user', params: { userName: name } })
}
</script>

内容的提问来源于stack exchange，提问作者Leon