解决点击页面跳转导致路径叠加，无法显示的问题

最新推荐文章于 2024-02-09 16:05:37 发布

晨洛溪月

最新推荐文章于 2024-02-09 16:05:37 发布

阅读量1.3k

点赞数 1

分类专栏：前端-原创文章标签： vue.js elementui

本文链接：https://blog.csdn.net/m0_55728090/article/details/124104951

版权

前端-原创专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在使用Vue和Element-UI构建后台页面菜单时，可能会遇到点击路由导致页面显示异常，表现为路径拼接错误。解决方法是在每个路由的`path`属性前添加前缀`/`，确保每个路由都有独立的路径。同样，在`el-menu-item`的`index`属性中也需要添加`/`，以防止路径叠加。此修复方法适用于菜单路由和标签路由的设置。

摘要由CSDN通过智能技术生成

用Vue+element-ui 开发后台页面菜单的时候，会遇到点击路由能显示，但是在这个基础上再点击下一个页面的时候，不能正常显示，然后看链接，发现她们的path部分叠加在一起了。

        {
          path: 'ccode',
          component: () => import('../components/ccode')
        },
        {
          path: 'notice',
          component: () => import('../views/Science/notice')
        },

为了解决这个问题，

        {
          path: '/ccode',
          component: () => import('../components/ccode')
        },
        {
          path: '/notice',
          component: () => import('../views/Science/notice')
        },

在这个基础在路径最前边加 ‘/’

这个放在标签里面的路由也适用，注意添加‘/’

 <el-menu-item-group>
     <el-menu-item index="/role">角色列表</el-menu-item>
     <el-menu-item index="/jurisdiction">权限列表</el-menu-item>
 </el-menu-item-group>