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

【问题标题】：Vue-router named views not working as expectedVue-router 命名视图未按预期工作
【发布时间】：2022-01-27 12:24:17
【问题描述】：

我一直坚持让我的 Vue 路由器按我的意愿工作。我的模板中有两个 <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 Grid 布局，使用了第二个路由视图（为了清晰起见缩短了）：

<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>

bpv--app-content 类的 div 应该显示来自我推送到路由器的组件的内容。您可以看到按钮将推送到/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> 标签并加载静态内容，但这没有任何区别。

【问题讨论】：

标签： vue.js vue-router vuejs3

【解决方案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 setup() 选项或在 defineAsyncComponent() 内声明的 async components（不适用于路由的 components 选项）。虽然路由器组件在技术上是通过动态导入异步加载的，但它们实际上并不是<suspense> 所期望的异步组件。

demo

【讨论】：