vben admin 新增路由测试,以及页面空白bug定位

---

前言

vben 官网新增路由文档以及示例
在开始学习 vben 的过程当中,自己尝试新增路由的步骤以及遇到的问题

一、自己新增测试

在 src/router/routes/modules 内新增一个模块文件---- test.ts
这里直接 copy 了官方的示例代码,并尝试给了三个子路由
官方示例中的子路由的component: () => import(‘/@/views/sys/about/index.vue’), 这里在 /@/views/目录下创建文件夹并新建了三个测试页面

• /@/views/myComponents/testComponentForRouterTest1.vue
• /@/views/myComponents/testComponentForRouterTest2.vue
• /@/views/myComponents/testComponentForRouterTest3.vue

// test.ts
import type { AppRouteModule } from '/@/router/types';
import { LAYOUT } from '/@/router/constant';
import { t } from '/@/hooks/web/useI18n';

const dashboard: AppRouteModule = {
  path: '/testRoute',
  name: 'TestRoute',
  component: LAYOUT,
  redirect: '/about/test1',
  meta: {
    orderNo: 20,
    icon: 'simple-icons:about-dot-me',
    title: t('测试路由'),
  },
  children: [
    {
      path: 'test1',
      name: 'AboutPage1',
      component: () => import('/@/views/myComponents/firstPageForRouterTest1.vue'),
      meta: {
        title: t('测试1'),
        icon: 'simple-icons:about-dot-me',
      },
    },
    {
      path: 'test2',
      name: 'AboutPage2',
      component: () => import('/@/views/myComponents/firstPageForRouterTest2.vue'),
      meta: {
        title: t('测试2'),
        icon: 'simple-icons:about-dot-me',
      },
    },
    {
      path: 'test3',
      name: 'AboutPage3',
      component: () => import('/@/views/myComponents/firstPageForRouterTest3.vue'),
      meta: {
        title: t('测试3'),
        icon: 'simple-icons:about-dot-me',
      },
    },
  ],
};

export default dashboard;

此时查看项目看起来好像一切都好

这里多了一个测试路由的菜单,并可以看到测试1,测试2,测试3
但是发现一个问题
自己添加的页面 1,2,3 在第一次点击其中一个之后,再次点击其他的页面会不再加载,路由是跳转了,但是页面中是没有显示的,而且这里是只要点击了自己添加的路由,下一个点击(无论是点击自己新建的还是项目原有的)都是空白的

这里有点意思啊,突然想起来同事之前写 vben 的项目的时候好像就是出现过这个 bug 的

二、尝试方案

尝试方案1

对比了自己和项目中原有的路由的区别发现
和官方示例不同的位置有以下几点

1. 官方示例中使用的icon,如下图一样可以自动显示的 (这里换成同样的图标)
2. 官方示例中使用的itle 是定义好的变量取出来的数据,我这里是放死的 (这里为了方便测试,就先不在定义 title 的位置添加,用当前定义好的)
3. conponent 指向的位置(这里写的时候写成和官方一样的 /@/ 这样的绝对路径了,在重命名文件的时候被 Volar 监控自动改了,被改成了相对路径)(这里再改回来)

将以上可能会造成差异的都改了

运行发现还是不行

尝试方案2

直接在现有的路由上把现有的子路由的路径位置改成自己新建的,发现这里整个路由的 ts 文件只改了 components 的路径,页面还是空白,所以这里猜测问题应该出在了新建的页面上

新建的页面,这里只往里放了一句话,问题应该是出在这里了

尝试方案3

通过在自己新建了路由文件当中将 component 的路径指向项目中已有的,查看跳转情况来定位bug是否就是在创建的 vue 组件文件
测试结果 : 将 component 路径指向项目当中已有的组件位置,就可以跳转了,不会出现点击一次之后再次跳转空白

// test.ts
import type { AppRouteModule } from '/@/router/types';
import { LAYOUT } from '/@/router/constant';
import { t } from '/@/hooks/web/useI18n';

const dashboard: AppRouteModule = {
  path: '/testRoute',
  name: 'TestRoute',
  component: LAYOUT,
  redirect: '/testRoute/test1',
  meta: {
    orderNo: 20,
    icon: 'ion:bar-chart-outline',
    title: t('测试路由'),
  },
  children: [
    {
      path: 'test1',
      name: 'AboutPage1',
      component: () => import('/@/views/demo/permission/front/index.vue'), // 这里用了示例项目中已有的组件路径
      meta: {
        title: t('测试路由1'),
        // icon: 'simple-icons:about-dot-me',
      },
    },
    {
      path: 'test2',
      name: 'AboutPage2',
      component: () => import('/@/views/demo/permission/front/Btn.vue'),
      meta: {
        title: t('测试路由2'),
        // icon: 'simple-icons:about-dot-me',
      },
    },
    {
      path: 'test3',
      name: 'AboutPage3',
      component: () => import('/@/views/demo/permission/front/AuthPageA.vue'),
      meta: {
        title: t('测试路由3'),
        // icon: 'simple-icons:about-dot-me',
      },
    },
  ],
};

export default dashboard;

---

小结

这里的问题是出在了自己自定义的 vue 组件
可能性分析

1. 需要满足某种特定格式
2. 路径 / 文件名有问题
3. 需要在哪个地方进行配置?

今天到此为止,明天继续

三、有效的解决方案(片面分析)

以下仅为自己排查问题时的分析,实际上的解决方案并不是

通过将演示项目中自带的页面内容放到了路由中自定义的页面,然后测试,发现路由跳转是没问题的,所以问题出在了页面当中的内容
通过排查发现页面中的样式部分需要有 PageWrapper

以下是完整的新增页面内容, template 当中的 PageWrapper 标签是必须的内容,不然就会到这页面空白

// 自定义页面
<template>
  <PageWrapper
    title=""
    contentBackground
    contentClass="p-4"
    content=""
  >  
  this page is test page 2 for router
  </PageWrapper>
</template>
<script lang="ts">
  import { computed, defineComponent } from 'vue';
  // import { PageWrapper } from '/@/components/Page'; 这里不引入也不会报错,猜测会不会是自动引入或者全局引入了

  export default defineComponent({
    components: {},
    setup() {
      return {
      };
    },
  });
</script>
<style lang="less" scoped>
  .demo {
    background-color: @component-background;
  }
</style>

总结

至此路由模拟测试 完成 !!~

后续

在继续查看官网文档的时候,发现官网对于 tab 页切换后页面空白 有介绍
tab 页切换后页面空白

最终有效的解决方案

以下来自官网

tab 页切换后页面空白

这是由于开启了路由切换动画,且对应的页面组件存在多个根节点导致的，在页面最外层添加<div></div>即可
错误示例

<template>
  <!-- 注释也算一个节点 -->
  <h1>text h1</h1>
  <h2>text h2</h2>
</template>

正确示例

<template>
  <div>
    <h1>text h1</h1>
    <h2>text h2</h2>
  </div>
</template>

提示

• 如果想使用多个根标签，可以禁用路由切换动画
• template 下面的根注释节点也算一个节点