vue三级路由的配置

在Vue中配置三级路由的方法如下：

首先，在路由配置文件中定义一级路由和二级路由，例如：

const routes = \[
  {
    path: '/',
    component: Home,
    children: \[
      {
        path: 'category',
        component: Category,
        children: \[
          {
            path: 'product',
            component: Product
          }
        \]
      }
    \]
  }
\]

在上述代码中，`/`是一级路由，`/category`是二级路由，`/category/product`是三级路由。

然后，在一级路由和二级路由的组件中添加 `<router-view></router-view>`，以便渲染三级路由的内容。例如，在Category组件中：

<template>
  <div>
    <h2>Category</h2>
    <router-view></router-view>
  </div>
</template>

最后，在Vue实例中使用路由配置：

const router = new VueRouter({
  routes
})

new Vue({
  router
}).$mount('#app')

这样就完成了Vue的三级路由配置。当访问`/category/product`时，会先渲染一级路由的组件（Home），然后在其中的`<router-view></router-view>`中渲染二级路由的组件（Category），最后在二级路由的组件中的`<router-view></router-view>`中渲染三级路由的组件（Product）。

引用\[1\]中提到了在配置三级路由时需要注意的问题，即在三级路由的页面中需要添加`<router-view></router-view>`，否则页面会显示空白。这是因为在配置时，二级路由的`component`指向的是面包屑组件路径而非三级页面所在路径，通过`redirect`重定向到三级页面。

引用\[2\]和\[3\]中提到了通过`this.$route.matched.length`来判断一级/二级菜单下是否有三级菜单的方法。根据`this.$route.matched.length`的值，可以判断出点击的一级/二级菜单下是否有三级菜单。
#### 引用[.reference_title]
- *1* *2* *3* [vue 动态显示三级路由](https://blog.csdn.net/Start2019/article/details/119851382)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]