使用饿了吗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没有任何报错提示,属于一种逻辑上的错误。
原文地址:https://www.cnblogs.com/BR-Tao/p/11359148.html
时间: 2024-08-06 03:14:44