Блог

Я настроил новый проект Vue3 с маршрутизацией. Внутри src я создаю новый каталог «foo» с Index.vue

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

и подкаталог «представления» с Home.vue

     <template>
      <div>Bar</div>
    </template>
 

Внутри каталога foo я также настраиваю router.js , где я регистрирую все представления для этой функции

     import Index from "./Index.vue";
    import Home from "./views/Home.vue";
    
    const featureRoute = {
      path: "/foo",
      component: Index,
      children: [
        {
          path: "/",
          component: Home,
        },
      ],
    };
    
    export default router => {
      router.addRoute(featureRoute);
    };
 

Внутри основного файла маршрутизатора я изменяю код на

     import { createRouter, createWebHistory } from "vue-router";
    
    import registerFooRouter from "../foo/router";
    
    const routes = [
      {
        path: "/",
        redirect: "/foo",
      },
    ];
    
    const router = createRouter({
      history: createWebHistory(process.env.BASE_URL),
      routes,
    });
    
    registerFooRouter(router);
    
    export default router;
 

То App.vue :

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

Чего я ожидаю:

При запуске приложения я перенаправляюсь на /foo него . Он отобразит a div с содержимым «Foo», а ниже-другое div с содержимым «Панель».

Что происходит:

Перенаправление работает нормально. Но, к сожалению, все, что я вижу, — это div содержимое «Foo». Второй div с содержимым «Панель» отсутствует.

Так что, похоже, он не может отобразить Home.vue файл.

Кто-нибудь знает, чего здесь не хватает?

path: "/", внутренние дочерние элементы интерпретируются маршрутизатором Vue как корневой путь. Если вы хотите отобразить что-то «по умолчанию» внутри маршрута «/foo», используйте пустую строку:

 const featureRoute = {
  path: "/foo",
  component: Index,
  children: [
    {
      path: "",
      component: Home,
    },
  ],
};
 

Проверьте последний пример в документах