vue2 vue-router 二级路由没显示(router-view销毁了)

提示：在项目开发中须注意依赖包版本问题，不同依赖包之间版本也会互相影响

---

前言

提示：纯前端项目，没有通过后端返回路由，也没有接入后端接口
在配置完Vue3的路由后，配置vue2的路由，发现按照vue3的配置逻辑，一级路由显示正常，二、三级路由跳转时router-view组件被销毁了，或者并没有按自己的需求显示

---

一、vue3 router 配置（正常配置，无异常）

在布局时，直接在App.vue页面引入Layout组件，把唯一的< RouterView >路由出口放在Layout组件内部，router的路由不管层级都会通过< RouterView >显示

。。。这是我想要的效果

1.1 …/router/index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
/**
 *
 * @param hidden 判断菜单是否在页面显示
 * @param title  菜单标题
 * @param menuType  菜单层级
 */
export const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    redirect: "/home",
    meta: { hidden: true, menuType: 1 },
  },
  {
    path: "/home",
    name: "home",
    meta: { title: "首页", menuType: 1, icon: "Menu" },
    component: () =>
      import(/* webpackChunkName: "home" */ "../views/home/index.vue"),
  },
  {
    path: "/vueStudy",
    name: "vueStudy",
    meta: { title: "Vue相关知识", menuType: 1, img: "vue" },
    redirect: "/vueStudy/vueComponentCommunication",
    children: [
      {
        path: "/vueStudy/vueComponentCommunication",
        name: "vueComponentCommunication",
        component: () =>
          import("@/views/vueStudy/vueComponentCommunication/index.vue"),
        meta: { title: "Vue组件通讯", menuType: 2 },
      },
      {
        path: "/vueStudy/mixin",
        name: "mixin",
        meta: { title: "Vue 混入", menuType: 2 },
        children: [
          {
            path: "/vueStudy/mixin",
            name: "mixin",
            component: () => import("@/views/vueStudy/mixin/index.vue"),
            meta: { title: "Vue2 mixin", menuType: 2 },
          },
        ],
      },
    ],
  },
  {
    path: "/:catchA1l(.*)",
    name: "404",
    meta: { hidden: true, menuType: 1 },
    component: () =>
      import(/* webpackChunkName: "error" */ "../views/error/index.vue"),
  },
];
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});
export default router;

1.2 …/main.ts

import router from "./router";
const app = createApp(App);
app.use(router);

1.3 …/App.vue

<template>
  <Layout />// 管理系统布局组件
</template>
import Layout from "@/views/layout/index.vue";

1.4 …/Layout.vue

<template>
  <div class="layout-page">
    <div class="menu-list">
      <Menu class="menu-content"></Menu>
    </div>
    <div class="right-content">
      <div class="tag-content">
        <el-icon
          @click="collapseChange"
          style="font-size: 20px; color: #555c64"
        >
          <Fold v-if="!isCollapse" />
          <Expand v-else />
        </el-icon>
      </div>
      <div class="breadcrumb"></div>
      <div style="flex: 1; overflow: auto">
        < RouterView ></ RouterView > // 路由出口
      </div>
    </div>
  </div>
</template>

---

二、使用vue 2 遇到的问题（router-view 被销毁）

2.1 完全按照vue3 的配置，router-view 直接被销毁了

路由正确，控制台也没有报错

2.2 保证Vue 和 Vue-router 版本匹配 (没生效)

在创建项目时并选择配置route，是项目创建后通过npm i vue-router 安装的，
认为可能是 vue 和 vue-router 版本不匹配，调整版本后仍没有生效

2.3 vue2 路由嵌套，每级路由必须有自己的路由出口

下方提到的
【目录菜单】指没有路由的菜单，只是一个菜单分类目录
【路由菜单】指有实际的路由跳转功能

查询资料后，发现vue2和vue3的配置逻辑是不一样的，vue2的每一级路由都要有自己的路由出口。但我的需求是所有的路由菜单通过一个< router-view >显示。不可能在每个目录菜单都新建一个页面放置< router-view >（这不符合需求）

2.3.1 搜索的示例 （每个目录菜单都要创建一个组件）

看到下面的代码，理解了父级菜单必须给自己的子菜单提供< router-view >（路由出口），子菜单才能正确显示
查询资料后，发现可以利用render() 返回一个 < router-view > ，它不会渲染组件

// component: { render: (h) => h("router-view") },

// router/index.js  文件
export default new Router({
  mode: "history", // 可选，使用 HTML5 History 模式
  routes: [
    {
      path: "/parent",
      component: Parent, // Parent组件内放置其子路由的路由出口<router-view>
      children: [
        {
          path: "child-a", // 子路径，不需要加 /
          component: ChildA,
        },
        {
          path: "child-b",
          component: ChildB,
        },
      ],
    },
  ],
});

// Parent.vue 组件
<template>
  <div>
    <h1>这是父组件</h1>
    <router-view></router-view> <!-- 子路由出口 -->
  </div>
</template>

三、Vue2 router正常配置回显成功 🎉 🎉 🎉

3.1 …/router/index.js

component: { render: (h) => h("router-view") },

import Vue from "vue";
import VueRouter from "vue-router";
import Layout from "@/views/Layout/index.vue";
//安装路由，显示引用
Vue.use(VueRouter);

//配置导出路由
export const routes = [
  {
    path: "/",
    component: Layout,
    redirect: "/home",
    children: [
      {
        path: "home",
        name: "home",
        component: () => import("@/views/Home/index.vue"),
        meta: { title: "首页", menuType: 1 },
      },
      {
        path: "vueStudy",
        name: "vueStudy",
        meta: { title: "Vue相关知识", menuType: 1, img: "vue" },
        component: { render: (h) => h("router-view") }, 
        redirect: "/vueStudy/vueComponentCommunication",
        children: [
          {
            path: "vueComponentCommunication",
            name: "vueComponentCommunication",
            component: () =>
              import("../views/vueStudy/vueComponentCommunication/index.vue"),
            meta: { title: "Vue组件通讯", menuType: 2 },
          },
          {
            path: "mixin",
            name: "mixin",
            component: () => import("../views/vueStudy/mixin/index.vue"),
            meta: { title: "Vue 混入", menuType: 2 },
          },
        ],
      },
    ],
  },
  {
    path: "/:catchA1l(.*)",
    name: "404",
    meta: { hidden: true, menuType: 1 },
    component: () =>
      import(/* webpackChunkName: "error" */ "../views/error/index.vue"),
  },
];
export default new VueRouter({
  mode: "history",
  routes,
});

3.2 App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

3.3 …/Layout.vue

<template>
  <div class="layout-page">
    <transition name="fade">
      <div :class="[isCollapse ? 'min-left' : 'max-left']" class="left-menu">
        <div class="logo">LOGO</div>
        <Menu></Menu>
      </div>
    </transition>
    <div class="right-content">
      <RightHeader></RightHeader>
      <div class="router-view">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import RightHeader from "./RightHeader.vue";
import Menu from "./Menu.vue";
export default {
  components: { RightHeader, Menu },
  computed: {
    ...mapState("common", ["isCollapse"]),
  },
  methods: {},
};
</script>