elementui导航菜单通过路由跳转怎么活跃状态

Posted 2023-04-18

参考技术A 要实现路由跳转，vue最简单的方法在用vue-cli构建完成之后的项目中使用的就可以实现，但是这种一般满足不了我们的样式需求。
像使用el-menu这种，如何实现呢？先要在el-menu标签纸中添加router属性，然后给每一个el-menu-item标签中的index设置对应的path，这个path值是要在项目中的路由文件router下的index.js中设置好的，什么path下面对应跳转到哪个组件。这样才能实现点击菜单跳转对应的页面。

vue-cli脚手架使用饿了吗插件的导航菜单无法实现路由跳转

使用饿了吗ui组件的导航菜单，在加上router属性之后无法实现index的路由跳转，点击无效且不报错

经过排查发现问题出现在路由的配置上面

代码如下：

const router = new vueRouter(
    mode:"history",
    routes:[
        path:‘/index‘,component:Index,children:[
            path:‘/users‘,component:Users,
        ],
        path:‘/login‘,component:Login,
        // path:‘*‘,redirect:‘/index‘,
    ]
)

在路由规则里面使用了mode:"history",的属性，为了去掉vue-router自带的  # 号，使路径更加简洁，

但同时也加上了访问错误地址时的自动跳转代码

// path:‘*‘,redirect:‘/index‘,

这个时候就出现了bug

当点击饿了吗ui组件的导航菜单时，浏览器会寻找  /users 的地址，但在vue-router里默认的地址应该是  ‘ / # / users ‘，所以浏览器会认为没有找到地址，将 / users 认为是错误地址自带跳转到

/ index 的首页面，在视觉上相当于没有进行跳转，实际上该页面进行了两次跳转，第一次跳  / users 发现没找到 ，第二次 跳回 ‘ /index ‘ 的默认地址

造成了该bug的出现，该bug没有任何报错提示，属于一种逻辑上的错误。