0

我正在尝试使用 Vue Router 4 在 Vue 3 中渲染我的嵌套路由。

routes/index.ts

import { createRouter, createWebHistory } from "vue-router";
import {NavbarLayout} from "@/layouts/NavbarLayout";
import AuthRoutes from "@/router/children/AuthRoutes";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      component: NavbarLayout,
      // children: AuthRoutes,
    },
  ],
});

export default router;

App.ts

import { defineComponent, h } from "vue";
import { VApp, VMain } from "vuetify/components";

export const App = defineComponent({
  name: "App",
  setup() {
    return function render() {
      // "Hello" is printed to the screen
      return h(VApp, h(VMain, () => ["Hello", h("router-view")]));
    };
  },
});

NavbarLayout.ts

import { defineComponent, h } from "vue";
import { VContainer } from "vuetify/components";
import { useRoute } from "vue-router";

export const NavbarLayout = defineComponent({
  name: "NavbarLayout",
  setup() {
    const route = useRoute();
   
    // The alert pop up is not shown as well
    alert("it should trigger this alert");

    return function render() {
      // "sub router" is not printed to the screen
      return h(VContainer, () => ["sub router", h("router-view", { key: route.path })]);
    };
  },
});

正在呈现的 HTML 正在呈现的 HTML

我尝试了几种组合，但到目前为止似乎没有任何效果。任何人都知道为什么没有渲染嵌套路线？

4

0 回答 0