Vue.js 3页面局部视图切换问题求助：路由跳转异常

1. 修改路由配置，使用嵌套路由 #

将Controls和Logs设为MainInterface的子路由，让它们渲染到父组件内的<router-view>中，避免替换整个页面。同时设置默认子路由，保证进入主页面时默认显示Controls组件。

修改后的路由代码：

import { createWebHistory, createRouter } from "vue-router";
import MainInterface from '../views/MainInterface.vue'
import Logs from '../views/Logs.vue'
import Scene from '../views/Scene.vue'
import Plan from '../views/Plan.vue'
import Controls from '../views/Controls.vue'
import PageNotFound from '../views/PageNotFound.vue'

const routes = [
    {
        path: '/',
        name: 'main',
        component: MainInterface,
        // 新增子路由配置
        children: [
            {
                path: '', // 默认子路由，访问/时自动渲染Controls
                name: 'controls',
                component: Controls
            },
            {
                path: 'logs', // 完整路径对应/logs
                name: 'logs',
                component: Logs
            }
        ]
    },
    {
        path: '/scene',
        name: 'scene',
        component: Scene
    },
    {
        path: '/plan',
        name: 'plan',
        component: Plan
    },
    {
        path: '/:catchAll(.*)*',
        name: "PageNotFound",
        component: PageNotFound,
    },
]

const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

2. 调整模板代码 #

移除controlPannel中直接引入的Controls组件，仅保留<router-view>，子路由内容会自动渲染到这个位置。同时修正路由链接的路径：

修改后的模板代码：

<template>
    <div id="main">
        <div id="scene"> 
            <scene/>
        </div>

        <div id="plan"> 
            <Plan/>
        </div>

        <div id="titleControl">
            <router-link to="/"> Controls </router-link>
            <router-link to="/logs"> Logs </router-link>
        </div>  

        <div id="controlPannel">
            <!-- 仅保留路由视图，由子路由渲染对应组件 -->
            <router-view/> 
        </div>
        
    </div>
</template>

补充说明 #

如果需要给Controls设置独立路由路径（比如/controls），可以在子路由中新增以下配置：

{
    path: 'controls',
    name: 'controls',
    component: Controls
}

同时把路由链接改成<router-link to="/controls"> Controls </router-link>即可。

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