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

Posted br-tao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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没有任何报错提示,属于一种逻辑上的错误。

 

以上是关于vue-cli脚手架使用饿了吗插件的导航菜单无法实现路由跳转的主要内容,如果未能解决你的问题,请参考以下文章

《移动应用开发》实验报告——仿饿了么商家页面

Vue.js高仿饿了么外卖App 最火前端框架

Vue--第一个vue-cli程序

Vue-cli4脚手架搭建

在脚手架vue-cli上引入插件JQUERY

笔记npm 安装 vue-cli