Vue-router 命名视图未按预期工作

Question

我坚持让我的 Vue-router 按我的意愿工作。我的模板中有两个 <route-view /> 命名视图。一个是顶部导航栏上的导航主视图，它工作正常。另一个不起作用。我已经这样定义了我的路由器（为清楚起见缩短）：

import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../views/HomeView.vue';

const routes = [
  {
    path: '/',
    name: 'home',
    components: { main: HomeView },
  },
  {
    path: '/bpvapp',
    name: 'bpvapp',
    components: { main: () => import('../views/BpvApp.vue') },
  },
  {
    path: '/bpvapp/projects',
    name: 'projects',
    components: { bpvapp: HomeView }, // HomeView component for testing purposes
},
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

我的App.vue在模板中定义了主要路线：

<template>
  <div class="main-container">
    <navigation-bar
      :isLoggedIn="isLoggedIn"
      :profileImageUrl="userImage"
      :signOut="signOut"
    />
    <suspense>
      <router-view name="main" />
    </suspense>
  </div>
</template>

我的 BpvApp.vue 组件是一个 CSS 网格布局，使用第二个路线视图（为清楚起见缩短）：

<template>
  <div class="bpv--app-container">
    <div class="bpv--app-toolbar">TOOLBAR</div>
    <div class="bpv--app-sidebar">
      <bpv-button
        text="Projects"
        icon="folder-star-multiple"
        styling="info"
        class="bpv--bs-1"
        :active="activeSection === 'projects'"
        to="/bpvapp/projects"
      />
    </div>
    <div class="bpv--app-content">
      <suspense>
        <router-view name="bpvapp" />
      </suspense>
    </div>
    <div class="bpv--app-assist">
      RIGHT Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam
      placeat deserunt quidem fugiat dicta repellat nobis mollitia! Consectetur
      laudantium dolor, odio adipisci at qui, deserunt minus facere rerum,
      voluptates maiores.
    </div>
    <div class="bpv--app-footer">FOOTER</div>
  </div>
</template>

div 和 class bpv--app-content 应该显示我推送到路由器的组件的内容。您可以看到按钮将推送到 /bpvapp/projects，在我的路由器定义中，它应该调用名称为 bpvapp 的路由器并显示内容。

为了完整起见，我的按钮组件按如下方式处理 to 属性：

    ...
    methods: {
      // this.to has the correct value '/bpvapp/projects', I double-checked
      buttonClicked(e) {
        if (this.to) {
          this.$router.push(this.to);
        } else if (this.action) {
          this.action();
        } else {
          this.$emit('click', e);
        }
      },
    },
    ...

现在我得到一个空白屏幕。当我检查 HTML 时，整个结构不存在，除了导航栏。

我在这里做错了什么？我试过删除 <suspense> 标签并加载静态内容，但这没有任何区别。

Answer 1

一个问题是两条路由配置为兄弟路由，但第二条路由应该是第一条路由的嵌套子路由，使用路由的 children 选项：

// router.js
const routes = [
  {
    path: '/',
    name: 'home',
    components: { main: HomeView },
  },
  {
    path: '/bpvapp',
    name: 'bpvapp',
    components: { main: () => import('@/views/BpvApp.vue') },

       
    children: [
      {
        path: 'projects',
        name: 'projects',
        components: { bpvapp: () => import('@/views/BpvProject.vue') },
      },
    ],
  },
]

注意：当某一级别只有一个router-view时，不需要命名。

另一个问题是您不需要 <suspense>。 <suspense> 适用于 async components declared with an async setup() option or within defineAsyncComponent()（不适用于路由的 components 选项）。虽然路由器组件在技术上是通过动态导入异步加载的，但它们实际上并不是 <suspense> 期望的 异步组件。

demo

Vue-router 命名视图未按预期工作

Vue-router named views not working as expected

vue.js

vue-router

vuejs3