react的多级路由定义

最新推荐文章于 2024-08-13 22:27:09 发布

做一个体面人

最新推荐文章于 2024-08-13 22:27:09 发布

阅读量448

点赞数 2

分类专栏：项目文章标签： react.js 前端前端框架

本文链接：https://blog.youkuaiyun.com/qq_41591215/article/details/138900416

版权

项目专栏收录该内容

19 篇文章

订阅专栏

在写实验室项目的时候，有一个需求，在二级路由页面点击按钮，跳转到详情列表页面，同时三级路由不用在导航栏显示，效果图如下：

在这里插入图片描述

前期的尝试：

在route,js文件这样定义的：

{
    path: 'music', // 一级路由
    name: 'music',
    access: 'music-manager',
    icon: 'search-monitor',
    routes: [
      {
        path: 'clManager', // 二级路由
        name: 'clManager',
        component: ClManager,
        routes: [
          {
            path: 'detail', // 三级路由
            name: 'detail',
            component: ClManagerDetail,
            hideInMenu: true,
          },
        ]
      },
 }

这样定义出现的问题就是点击三级路由的时候，三级路由页面的内容是二级路由页面的内容。

解决方法

{
    path: 'music', // 一级路由
    name: 'music',
    access: 'music-manager',
    icon: 'search-monitor',
    routes: [
		{
			path: 'clManager', // 二级路由
			name: 'clManager',
			component: ClManager,
		},
		{
			path: 'clManager/detail', // 三级路由
			name: 'detail',
			component: ClManagerDetail,
			hideInMenu: true,
		},
 }