vue-router 4.0 获取当前页面的第三级路由信息

可以通过 `$route.matched` 属性获取当前页面的匹配路由记录数组，然后从中获取第三级路由信息。具体实现可以参考以下代码：

// 获取当前页面的匹配路由记录数组
const matchedRoutes = $route.matched;

// 判断是否存在第三级路由
if (matchedRoutes.length >= 3) {
  // 获取第三级路由信息
  const thirdLevelRoute = matchedRoutes[2];
  console.log(thirdLevelRoute);
} else {
  console.log('当前页面不存在第三级路由');
}

其中，`matchedRoutes` 数组中的每个元素都是一个路由记录对象，包含了该路由的各种信息，例如路由路径、组件等。可以根据具体需要，从中获取所需的路由信息。

相关问题

使用vue-element-admin的三级路由时，第二级路由的component应该如何设置

在使用vue-element-admin的三级路由时，第二级路由的component需要设置成一个父级组件，该组件需要包含一个<router-view>标签，用于渲染第三级路由的组件。具体的实现方式如下：

1. 在router/index.js中定义第二级路由，如下所示：

{
  path: '/parent',
  component: Layout,
  children: [
    {
      path: 'child',
      component: () => import('@/views/child/index'),
      name: 'Child',
      meta: { title: 'Child', icon: 'el-icon-s-help' }
    }
  ]
}

2. 在views目录下创建一个名为child的文件夹，用于存放第三级路由的组件。

3. 在child文件夹下创建一个名为index.vue的文件，该文件就是第三级路由的组件。

4. 在父级组件的模板中添加<router-view>标签，用于渲染第三级路由的组件。

<template>
  <div>
    <h1>Parent Component</h1>
    <<router-view></router-view>
  </div>
</template>

这样就可以实现vue-element-admin的三级路由了。

vue3 三级路由跳转白屏

引用中提到的问题是在使用Vue Router进行路由切换时，当页面长时间无操作后会出现页面不显示的情况。解决办法是给router-view添加一个key标识，在切换路由时更新key值，以强制重新渲染页面。另外，如果使用了layout封装布局，则需要在layout下的主页面中的router-view添加标识。

引用中提到的问题是在Vue Router中进行路由参数改变后，页面整体刷新时会出现白色闪屏。解决办法有两种思路。第一种思路是通过一个空白页进行页面的路由跳转，即在需要跳转的地方使用this.$router.replace将路由跳转到一个中间跳转文件，然后在中间跳转文件中再跳转回目标页面，以避免整体刷新。第二种思路是在目标页面的最外层标签上添加一个唯一的key，即:key="$route.fullPath"，以确保每次路由参数改变时页面能重新渲染而不出现白色闪屏。

以上是解决引用中提到的问题的方法。引用主要介绍了Vue Router懒加载速度缓慢的问题及解决方法，可以作为参考。如果您遇到了Vue 3三级路由跳转白屏的问题，可以尝试使用上述解决办法来解决。<span class="em">1</span><span class="em">2</span><span class="em">3</span>