How can I change the view for one part of the page in VueJs 3-CodePudding

I have three main sections inside my page, and I want to switch the view for one section only:

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

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

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

        <div id="controlPannel">
            <div id="controls"> 
                <Controls/>
            </div>

            <router-view/> 
        </div>
        
    </div>
</template>

router

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
    },
    {
        path: '/scene',
        name: 'scene',
        component: Scene
    },
    {
        path: '/plan',
        name: 'plan',
        component: Plan
    },
    {
        path: '/logs',
        name: 'logs',
        component: Logs
    },
    {
        path: '/controls',
        name: 'controls',
        component: Controls
    },
    {
        path: '/:catchAll(.*)*',
        name: "PageNotFound",
        component: PageNotFound,
    },
]

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

export default router

I want to parse the controls as a default, and I want the user to navigate between the Logs and the Controls only, but when I click on any of the routing links it takes me to another page completely!

Can you please tell me how can I solve that? thanks in advance.

CodePudding user response：

Instead of having all routes at one level you can use Nested Routes

Change your App.vue to

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

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

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

<script>
import PlanPage from "./Views/Plan.vue";
import ScenePage from "./Views/Scene.vue";
export default {
  name: "App",
  components: {
    PlanPage,
    ScenePage,
  },
};
</script>

Add another file in view to handle to nested routing such as Sub.vue with following content

<template>
  <router-view />
</template>
<script>
export default {
  name: "SubPageForRouting",
};
</script>

and finally update your router.js file as

import { createWebHistory, createRouter } from "vue-router";
import SubPageForRouting from "../Views/Sub.vue";
import LogPage from "../Views/Log.vue";
import ControlPage from "../Views/Controls.vue";

const routes = [
  {
    path: "/",
    component: SubPageForRouting,
    children: [
      {
        path: "",
        alias: "controls",
        component: ControlPage
      },
      {
        path: "logs",
        component: LogPage
      }
    ]
  }
];

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

export default router;

You can find a working code sandbox Here