[Vuejs]-How can I change the view for one part of the page in VueJs 3

by

1👍

✅

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 nested routing such as Sub.vue with the 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

👤Anis

Leave a comment